HTML Flashcards
What does HTML stand for?
HyperText Markup Language
A language for annotating text so that it can link to other texts… Also images, videos, sounds, etc
HTML is interpreted… meaning:
A browser interprets HTML and displays it according to its meaning.
The first line of a HTML 5 document should be:
The doctype (version description) <!DOCTYPE html>
EVERYTHING ELSE IS INSIDE THE <html> TAGS
Empty tags
Tags that do not enclose any text… e.g. a line break <br></br> or an image <img … >
Tag attributes
-Added information in the start tag
(attributeName=”attributeValue”)
E.g.: source of the image: < img src=”test.jpg” >
ID
Used to identify a single element… no dublicates!!
Class
Used to identify a group of elements
HTML Head
- Meta information
- Page title < title > MyTitle < /title > Typically displayed in the browser bar
-Page encoding < meta charset=”UTF-8” >
-Page information in meta tags, name=”keywords” content=”the…content!”
SEARCH ENGINES LOVE METADATA!!!
-Inclusion of CSS docs and scripts
HTML Body
Contains the actual content that is rendered by the browser
- Text
- Links
- Images
- Videos
- …
Headings
< h1 > to < h6 > semantically most important to least important… SEMANTICALLY.
Paragraphs
< p > paragraph :P < /p >
Images
< img src=”source.png” alt=”description” >
empty tag
Image source is given by src attribute
alt attribute is for a description for when the image does not load or for screen readers… helps the blind
Lists
Unordered or Ordered lists
< ul > and < ol >
list items are enclosed with < li > list item < /li >
Hyperlinks
< a href=”someURL.bla” target=”_blank” > here < /a >
Defines a hyperlink to another resource
href is the target url
target defines how to open the link…
- _blank : in another window/tap
- _self: in the same window
Hyperlink within a document
Give an ID to an HTML element with the id attribute
Link with href to that attribute
Can be appended on an absolute and relative url
Tables
All enclosed in a < table > < /table > tag
< thead > < /thead > encloses the head
< body > < /body > encloses the table body
< tr > < /tr > defines a row
< th > < /th > defines a cell in the thead
< td > < /td > defines a cell (not in thead)
< caption > < /caption > defines the table caption (title)
Divs
- Divisions
- Invisible containers
- Cause line break
< div > < /div >
You put other kinds of tags in them
Used heavily for layouting with CSS
Forms
-Used to cellect input
-Contain input fields, buttons, checkboxes etc:
< form action=”whereToSendThis” method=”get” > < /form >
inside these there would be fx:
User: < input type=”text” name=”user” > < br >
< input type=”submit” onclick=”do()” value=”Login” >
The different form elements:
Input field (text): < input type="text" value="Default User" &gt
Submit button:
< input type=”submit” value=”Submit” >
Radio button:
< input type=”radio” name=”role” value=”usr >User
Checkbox:
< input type=”checkbox” name=”check” value=”check1” >Item 1
Dropdown menu:
< select name=”cars” > < /select >
and in those are:
< option value=”volvo” > Volvo < /option >
-Disabled elements cant be modified
< input type=”text” disabled value=”Default User” >
Text area(multi line) < textarea name="message" rows="10" cols="10" > Default < /textarea >
Group items using fieldset
< fieldset > < /fieldset >
in those you can set < legend > < /legend > to name the fieldset.
Form submision
Only takes GET and POST as methods
GET: form data is appendet to URL
POST: variables are included in request body
Block vs Inline Elements
Block elements start in a new lina and take as much width as possible
Inline elements start from the current position, take as much space as needed
Accessibility
Sematic elements… header carries meaning and fx titles on hyperlinks and images
meta tags to give info on your website
