HTML 5

HTML in short

  • Stands for HyperText Markup Language
  • Tim Berners-Lee specified HTML and wrote
    browser & server software late 1990
  • Written in tags, enclosed in angle brackets < >
  • HTML elements form the building blocks of all websites
  • Not all the browsers implement HTML in the same way
  • HTML5 is NOT a programming language

HTML Elements (tags)

  • Have a start and end tag, or are self-closing
  • <span>text</span> <img src="...." />
  • Can have attributes

Tag examples

<p class="basic-text">This is a Paragraph</p>

<ul class="mylist">
  <li class="list-item">Item one</li>
  <li class="list-item">Item two</li>
  <li class="list-item">Item three</li>
  <li class="list-item">Item four</li>
</ul>

<img src="someimage.jpg" />
<img src="someimage.jpg">

<br />


.......

Attribute examples

  • id
  • class
  • style
  • src
  • method
  • action
  • data-<attribute-name>

HTML5

How to start

How to start

  • Specify DOCTYPE
  • HTML & lang attribute
  • Head
  • Body
<!DOCTYPE html>
<html lang="en">
	<head>
	</head>
	<body>
	</body>
</html>

DOCTYPE

  • It defines which version of HTML your document is using
  • It allows you to use tools as the Markup Validator to check the syntax of your HTML
  • It tells the browser how to render the page in standards compliant mode
  • It is not an HTML tag
<!DOCTYPE html>

HTML element

  • Add lang-attribute
    • HTML5 allows you to put this on every element but isn't useful
  • Best to add it to the HTML tag <html> 
  • Keep it short
  • Everything goes inside the HTML element
<!DOCTYPE html>
<html lang="en-US">
	<head>
	</head>
	<body>
	</body>
</html>

HEAD element

  • Meta tags e.g. charset, viewport
  • Title
  • Stylesheet
  • Might contain JavaScript (JS) but usually
    this is put in the end of an HTML file

Assignment: Give 3-5 examples of meta-tags and why we use it

<meta name="description" content="my description">

META elements

  • Used for extra information
  • Important for SEO
    • Search Engine Optimization
  • Important for Browsers
  • Important for Social Media
  • Not important for humans

Assignment: Give 3-5 examples of

SocMed Meta tags

BODY element

  • Defines the document's body
  • Contains all the contents of an HTML document

HTML5

Attributes

Attribute examples

  • name="value"
  • style
  • src
  • action
  • method
  • widht
  • height
  • Boolean attributes
  • disabled
  • checked
  • selected
  • Alternative can be name/value
  • disabled="disabled"

Assignment: Find two of each attributes that where not mentioned here

Data/ user attribute

  • data-<name>="my_content"
  • Used for user defined information
     
  • CSS styling
    data-username="firstname" 
    article[data-username='firstname'] {...}
  • Javascript 
    let firstname = document.querySelector('[data-username="firstname"]');

Attribute ID vs. class

  • ID
  • Is unique on an HTML page
  • Used to identify one element
  • Class
  • Used for elements that are the same on one HTML page
  • Used for DRY styling (Do not Repeat Yourself)
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>An ID is unique</title>
    </head>
    <body>
    	<div id="unique">
    	</div>
    </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>A class can be repeated</title>
    </head>
    <body>
    	<div id="unique">
        	<p class="maintext"> 
            	Here is some text
            </p>
            <p class="maintext">
            	Here is some more text
            </p>
    	</div>
    </body>
</html>

HTML5

block vs. inline elements

Elements with autostyle

HTML tags may have a certain default style. You can inspect them in the browser debug console. Examples in Chrome:

"Display" is a style property that can have the following values:

 

  • block
  • inline
  • none
  • and a lot of others...)

Block

  • A block element is displayed on a new line
  • Default 100% width of the containing element

Inline

  • An inline element is displayed with no line breaks
  • It starts on the same line with his own width

Examples: <html>, <body>, <div>, <p>, <h1>, <h2>, ....

Examples: <span>, <img>

So-called block elements has default {display: block} style. Check what is default style for <span> and <img> tags.

HTML5

Typography elements

Typography elements

The central goal of HTML is to present text content. There is a set of typography elements with default styles that you can use to markup text.

  • <h1> - Heading of 1st level
  • <h2> - Heading of 2nd level
  • <h3> - Heading of 3rd level
  • ....
  • <h6> - Heading of 6th level
  • <p> - paragraph (Normal text)

Assignment: Inspect styles of typography elements in browser console

HTML5

Semantic elements

Semantic element

A semantic element clearly describes its meaning to both the browser and the developer.

Non semantic

<div>

<span>

Semantic

<header>

<article>

Often used elements

  • <header>
  • <section>
  • <article>
  • <aside>
  • <footer>
  • <main>
  • <nav>

Assignment

Basic CSS

What is CSS

  • CSS = Cascading Style Sheet
  • CSS describes how HTML elements will look in browser

CSS writing

  • Rules consist of one or more selectors with one or more declarations. 
  • A declaration consist of a property with a value

Priority of CSS styles

  1. Inline style
  2. <style> tag
  3. External style sheets
  4. Browser defaults

If the same property was declared on different levels,
CSS will apply it in the following order:

Browser default > External styles > style tag > inline styles.

CSS rules/ specificity

  • Cascading: last match, wins
  • Matching according to rules and specificity
  • Type selectors (e.g., h1) and pseudo-elements (e.g., ::before)
  • Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover)
  • ID selectors (e.g., #example)

Basic coding rules

Consider this code

<html>
 <head>
 <style>
   body {
    font-family: verdana;
    color: #FFF;
    background-color: #000;
   }
   
   h2 { color: blue; }
   
   .alert { color: yellow; }
   
   .info { color: lightblue; } 
   
   h2.info { color: pink; }
 </style>
 </head>
 <body>
  <main class="alert">
   <section>
    <header>
     <h1>Hello world</h1>
     <h2>This is my subtitle</h2>
    </header>
    <article class="main_article">
     <h2 class="info">Article header</h2>
     <p>Article info</p>
    </article>
   </section>
  </main>
 </body>
</html>

This is the result

But why

<html>
 <head>
 <style>
 body {
  font-family: verdana;
  color: #FFF;
  background-color: #000;
 }
 h2 { color: blue; }
 .alert { color: yellow; }
 .info { color: lightblue; } 
 h2.info { color: pink; }
 </style>
 </head>
 <body>
  <main class="alert">
   <section>
    <header>
     <h1>Hello world</h1>
     <h2>This is my subtitle</h2>
    </header>
    <article class="main_article">
     <h2 class="info">Article header</h2>
     <p>Article info</p>
    </article>
   </section>
  </main>
 </body>
</html>

Assignment

CSS link

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Basic CSS

3 ways to declare styles

<h1 style="color: red">Red text</h1>

Inline

Applied on HTML element directly

<style> tag

<html>
  <head>
    <style>
      h1 { color: red; }
    </style>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

External file

<html>
  <head>
    <style>
      <link rel="stylesheet" href="styles.css" />
    </style>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

External file

h1 {
  color: red;
}

index.html

styles.css

Basic CSS

!important

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p class="header blue">Hello world</p>
</body>
</html>
 p { color: red; }
.blue { color: blue;  }
.header { color: green; }

CSS applies styles in the order as stated in the stylesheet (+ order of CSS declarations). What will be the resulting color of the paragraph?

Conflicting styles

If several style descriptions declare the same property, CSS needs to decide which one to apply. The order of declaration is a guide for decision. 

!important

By using the "!important" flag, we can manipulate the default behavior of conflicting styles. 

!important

We can't apply "!important" flag to fix occurring style bugs. If we have several styles patched with "!important", it may bring even more complicated cases.

!important

According to the priority of CSS declarations, inline styles must be applied with the highest priority, but "important" flag overrides it as well.

!important

But not if we have "!important" inline styles. After all, you may end up with a bunch of "!important" styles conflicting with each other as well.

!important

General rule: use !important when it's really important. Most of the time you can resolve the conflict in a normal way: change the order of styles, refactor classes, apply inline styles.

"!important" is an exceptional tool to rescue. 

 

Certain CSS architectures try to prevent style conflicts
(OOCSS - object-oriented CSS)

HTML5 and start CSS

By CodePamoja

Made with Slides.com

HTML5 and start CSS

This presentation will teach, in an interactive way, the basic usage of HTML5 and semantic elements, and provide a start with basic CSS rules/ specificity.

  • 51

More from CodePamoja