Hypertext Markup Language (HTML) is a standard markup language used for creating web pages. HTML concepts include elements, attributes, and tags. An HTML document has a standard structure, including a doctype declaration, a head section, and a body section.
Common HTML elements include headings, paragraphs, links, images, and lists. Section elements, such as <header> and <footer>, provide additional structure to web pages.
Semantic structural tags, such as <nav>, <main>, and <article>, provide meaning to the content and structure of a web page. These tags help search engines and assistive technologies understand the content, making web pages more accessible and easier to navigate. By using semantic structural tags, developers can create more meaningful and accessible web pages.
Topics covered:
- Hypertext Markup Language
- HTML Concepts
- HTML Document Structure
- HTML Common Elements
- Section Elements
- Semantic Structural Tags
Video (in Bulgarian)
Presentation Content
Hypertext Markup Language
- HTML – Hyper Text Markup Language
- A notation for describing
- document structure (semantic markup)
- formatting (presentation markup)
- Looks (looked?) like:
- A Microsoft Word document
- A notation for describing
- The markup tags provide information about the page content structure
- A HTML document consists of many tags
Creating HTML Pages
- An HTML document must have an . htm or .html file extension
- HTML files can be created with text editors:
- Notepad, Notepad++, Sublime Text
- Or HTML editors (WYSIWYG Editors):
- Microsoft WebMatrix
- Microsoft Expression Web
- Microsoft Visual Studio
- Adobe Dreamweaver
HTML – Past, Present, Future
- 1991 – HTML first mentioned – Tim Berners-Lee – HTML tags
- 1993 – HTML (first public version, published at IETF)
- 1993 – HTML 2 draft
- 1995 – HTML 2 – W3C
- 1995 – HTML 3 draft
- 1997 – HTML 3.2 – “Wilbur”
- 1997 – HTML 4 – ”Cougar” – CSS
- 1999 – HTML 4.01 (final)
- 2000 – XHTML draft
- 2001 – XHTML (final)
- 2008 – HTML5 / XHTML5 draft
- 2011 – feature complete HTML5
- http://en.wikipedia.org/wiki/HTML5#Plan_2014
HTML Terminology
- Concepts in HTML
- Tags
- Opening tag and closing tag
- The smallest piece in HTML
- Attributes
- Properties of the tag
- Size, color, etc…
- Elements
- Combination of opening, closing tag and attributes
- Tags
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 " </ "
- Opening
<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
<!-– makes a hyperlink to Google -->
<a href="http://google.com"> go to Google</a>
<!-– makes a horizontal line -->
<hr width="95%" size="3px"/>
<!-– adds an image in the web page -->
<img src="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
- For example the attribute src of the img element
HTML Elements
- HTML Elements are combination of tags and attributes
- Opening tag with some or none attributes and a closing tag
<a href="http://google.com"> go to Google</a>
<html>…</html>
HTML Document Structure
- Some elements are essential to each HTML Document:
- h tml , 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
- Ex. <b>Hello</b> makes “Hello” bold
| <b></b> | bold |
|---|---|
| <i></i> | italicized |
| <u></u> | underlined |
| <sup></sup> | superscript |
| <sub></sub> | subscript |
| <strong></strong> | strong |
| <em></em> | emphasized |
| <pre></pre> | Preformatted text |
- Many of the formatting tags are deprecated
- Use CSS instead
Some Simple Tags
- Hyperlink Tags
<a href="https://nikolay.it/" title="Nikolay.IT">Nikolay Kostov</a> - Image Tags
<img src="logo.gif" alt="logo" /> - Text formatting tags
This text is <em>emphasized.</em> <br />new line<br /> This one is <strong>more emphasized.</strong>
Headings and Paragraphs
- Heading Tags (h1 – h6)
<h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> - Paragraph Tags
<p>This is my first paragraph</p> <p>This is my second paragraph</p> - Sections: div and span
<div style="background: skyblue;">This is a div</div>
Ordered Lists: <ol> Tag
- Create an Ordered List using <ol></ol> :
<ol type="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ol> - Attribute values for type are 1 , A , a , I , or i
Unordered Lists: <ul> Tag
- Create an Unordered List using <ul></ul> :
<ul type="disc"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul> - Attribute values for type are:
- disc , circle or square
Definition lists: <dl> tag
- Create definition lists using <dl>
- 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
- Pairs of text and associated definition; text is in <dt> tag, definition in <dd> tag
The <div> Tag
- <div> creates logical divisions within a page
- Block element
- Used with CSS
- Example:
<div style="font-size:24px; color:red">DIV example</div> <p>This one is <span style="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 <span style="color:red; font-weight:bold">only a test</span>.</p> <p>This one is another <span style="font-size:32px; font-weight:bold">TEST</span>.</p>
The “HTML 4 and Before” Way
- Using divs with IDs
- The IDs are needed for styling
<html> <head> … </head> <body> <div id="header"> … </div> <div id="navigation"> … </div> <div id="sidebar"> … </div> <div id="content"> … </div> <div id="footer"> … </div> </body> </html>
- The IDs are needed for styling
The HTML 5 Way
- In HTML 5 there are semantic tags for layout
- <nav> <header> <footer> <section>
<html> <head> … </head> <body> <header> … </header> <nav> … </nav> <aside> … </aside> <section> … </section> <footer> … </footer> </body> </html>
- <nav> <header> <footer> <section>
Remember
- It is important to have the correct vision and attitude towards HTML
- HTML is only about structure, not appearance
- Browsers tolerate invalid HTML code and parse errors – you should not
- Always think about semantics
- The W3C HTML Validator is a way to validate your HTML