HTML Basics Flashcards
HTML
-Hypertext Markup Language
-Used to build webpages
+provides structure
- Hypertext: content linked to related content
- Tags surround and “mark up” text, forming an element
HTML
-Hypertext Markup Language
-Used to build webpages
+provides structure
- Hypertext: content linked to related content
- Tags surround and “mark up” text, forming an element
<p></p>
- paragraph tag
- formats interior text
<p></p>
paragraph tag
content
-have opening tags and closing tags
someone elements like images are self closing and do not need a separate closing tag.
DOCTYPE TAG
DOCTYPE TAG
HTML document
-will be comprised of tags which are characters surrounded by angle brackets
<p></p>
paragraph tag
content
-have opening tags and closing tags
<span></span>
- inline element
- groups interior content
- occupies width of interior content (no more than width of screen)
- used to place content side by side
Attributes
HTML tags can also have metadata inside them referred to as attributes. An attribute is defined by a key, and equals sign, and a value that is usually between double quotes.F
DOCTYPE TAG
HTML structure
.
<p> A parag</p>
Syntax rules
-tags are not case-sensitive
-use lowercase when you declare tags
-attribute values are case-sensitive
ex: <img></img>
is different from <img></img>
- HTML only allows single spaces
- elements should have closing tags or be self-closing
- elements should be properly nested
- browsers will ignore unknown tags
Webpages are
comprised of Keywords: elements + attributes
<div></div>
- A block style element
- groups interior content
- occupies entire window screen width
<span></span>
- inline element
- groups interior content
- occupies width of interior content
- used to place content side by side
Layout elements
Anchor Tag attribute : href=”” (hypertext reference)
it is an attribute that specifies the location of the resource being referred or that the link directs to
Anchor Tag attribute : target=”” (target window)
-determines which context the link opens to
-it can have one of four values
+ “self” : opens the link in the same context (window)
+ “_blank” : opens the link in a new context
+ “opens the link in a parent context”
+“top” : opens in the topmost parent context
Semantic elements
- examples are <div> and <span> elements</span>
- do not visually affect webpages
- used to organize related content </span></div>
Semantic elements cont.
- : header content
- : navigation content
- : a reserved section of a page
- : article or story content
- : sidebar content
- : footer content
webpages may attach special styling or functionality to semantic tags
Links
-The hyperlink makes hypertext, hyper
<a> - anchor</a>
anchors a link to a webpage
Internal Links
- links don’t have to redirect to a resource. They can redirect to a link further down the page
- if your elements have an ID assigned you can link those elements by using a hashtag and the ID name as a href value.
ex: <a>Link to Div</a>
Tables
-webpage design naturally fits a grid design
table element
table row
each row contains cells of data which use the table data cell tag
Lists
- <ol> : ordered list
creates an itemized list (1,2,3)
</ol>
-</ol><ul> : unordered list
creates a bulleted list (bullet points)
-<li> : list item
denotes an item in any kind of list </li></ul>
Semantic elements Tags used for organization (in 3 sections) that don’t affect table in any way
Form tag :
: form
used to group input elements and determine how they are handled
-when a form submits data to the server, it does so by using the HTTP protocol.
method = “”
- HTTP method
- determines which HTTP method is used to send the form request
- the method will be GET or POST
HTTP method: GET
- will embed the form data into the URL of the request sent to the server
- used when you want data to be bookmarked
- should never be used for sensitive information like passwords
HTTP method: POST
- will put the data in the body of the request
- most secure method of sending data
HTTP attribute: action=”handler”
action=”handler” : form action (declares the location (URL) where the form data is sent for processing)
-specifies the URL of the handler that will process the HTTP request (form data)
Form Inputs
: form inputcreates a data entry field
: text area
creates a resizable text box
: selection input
creates a drop down list
: selection option
denotes an item selectable in a select list
: field set
groups form inputs together
: field set legend
-names a field set. : input labelidentifies interior text as a label for an input fieldcreates a button that can have functionality attached
-can have a type attribute like type =”submit” to submit a form
HTTP method: GET
- will embed the form data into the URL of the request sent to the server
- should never be used for sensitive information like passwords
HTTP method: POST
- will put the data in the body of the request
- most secure method of sending data
Form Inputs
: form inputcreates a data entry field
: text area
creates a resizable text box
: selection input
creates a drop down list
: selection option
denotes an item selectable in a select list
: field set
groups form inputs together
: field set legend
-names a field set. : input labelidentifies interior text as a label for an input fieldcreates a button that can have functionality attached
-can have a type attribute like type =”submit” to submit a form
Form input types
type= “email” or “color” or “number” or “date” or “password” or “range” or “tel” or “url”
-specify type inside the input tag
type= “email” : validates inputs as email address
type=”color” : offers a color picker tool
type=”number” : only allows numbers as input
type=”date” : restricts input to mm/dd/yyyy
type= “password” : visually obscure user input
type= “range” : replaces input with a slider
type= “tel” : formats input as phone number
type= “url” : validates input as url
note
every element should also have a name=”” attribute to label the form data for the handler
HTML Images : <img></img>
<img></img> : image
displays a linked image
-need to provide an address of an image file to use as a source
HTML Image tag attribute : src=”url.jpg”
src:”url.jpg” : source
The URL of the image
HTML Image attribute : alt=”text”
alt=”text” : alternative text
Text that is shown when the image is not loaded
HTML Audio tag:
-embeds a linked audio file into a page
you can display text by including it between the audio tags
HTML Video tag:
-embeds a linked video file into a page
Audio and video value-less attributes: controls, autoplay, and loop
- controls: toggles default playback controls in the browser for the media
- autoplay: toggles automatic playback
- loop: toggles automatic replay when done
