Logo

Video: HTML5 Fundamentals (Bulgarian)

  • November 10, 2022
  • Nikolay Kostov (Nikolay.IT)

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
  • 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

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
<!-– 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

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

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 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>

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

Share