Combination of opening, closing tag and attributes
HTML Tags
Tags are the smallest piece in HTML Document
Start with " < " and end with " > "
Two kinds of tags
Opening
Mark the start of an HTML element
Closing
Mark the end of an HTML element
Start in " </ "
<html><body><h1>Hello Pesho!</h1></body></html>
Attributes
Attributes are properties of HTML Elements
Used to set size, color, border, etc…
Put directly in the tags
Has value surrounded by " " or ’ ’
The value is always a string
<!-–makesahyperlinktoGoogle--><ahref="http://google.com"> go to Google</a><!-–makesahorizontalline--><hrwidth="95%"size="3px"/><!-–addsanimageinthewebpage--><imgsrc="images/SEB-Ninja.png"/>
Most Common Attributes
There are some attributes that are common for every HTML element
Id, class, name, style
And some attributes are specific
For example the attribute src of the img element
Shows the path to the image to be shown
HTML Elements
HTML Elements are combination of tags and attributes
Opening tag with some or none attributes and a closing tag
<ahref="http://google.com"> go to Google</a>
<html>…</html>
HTML Document Structure
Some elements are essential to each HTML Document:
html , head , body , doctype
The html element
Used to mark the beginning and ending of a HTML document
All the content of the web page is inside this tag
<html>
…
</html>
Head Element
The head tag contains markup that is not visible to the user (i.e. the person using the browser)
But helps the browser to render correctly the HTML document
What is in there?
Styles, scripts
Declare encodings
Etc..
The title tag - the text in the tab of a browser
Body Element and Doctype
body element contains all the visible to the user markup
Headings, text, hyperlinks, images, etc…
Textboxes, sliders, buttons…
Doctype is kind of the validator of the page
Tells the browser in which version of HTML the page is written
HTML 5 Doctype
<!DOCTYPE html>
Text Formatting
Text formatting tags modify the text between the opening tag and the closing tag
Pairs of text and associated definition; text is in <dt> tag, definition in <dd> tag
<dl><dt>HTML</dt><dd>A markup language …</dd><dt>CSS</dt><dd>Language used to …</dd></dl>
Renders without bullets
Definition is indented
The <div> Tag
<div> creates logical divisions within a page
Block element
Used with CSS
Example:
<divstyle="font-size:24px; color:red">DIV example</div><p>This one is <spanstyle="color:red; font-weight:bold">only a test</span>.</p>
The <span> Tag
Inline style element
Useful for modifying a specific portion of text
Don’t create a separate area (paragraph) in the document
Mainly used to style parts of a text
<p>This one is <spanstyle="color:red; font-weight:bold">only a test</span>.</p><p>This one is another <spanstyle="font-size:32px; font-weight:bold">TEST</span>.</p>