HTML 1

Case types

In the programming world we use different cases for different languages and purposes:

  • lowercase
  • UPPERCASE
  • camelCase
  • PascalCase
  • slug_case
  • kabab-case

Hyper Text Markup Language

  • Made of Tags
  • Hierarchical
  • All lower case
  • Describes the structure and content of the page

HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>
  • Responsible for page styling and layouting
  • Targets HTML elements for styling through selectors
  • All lower case and kabab-case

A breif word about CSS

Cascading Style Sheet

body {
    background:red;
    font-size:20px;
}

Exercise

Turn off a page CSS on a page

  1. Install the Web Developer chrome extension
  2. Navigate to a beautiful web page
  3. Open the Web Developer extension
  4. CSS > Disable all styles
  5. Behold! The internet, 1994 version!

Demo

A look at a page with DevTools

Exercise

  1. Go to google.com

  2. Using DevTools
    1. Delete the google logo
    2. Change the text inside the “Google Search” button to something els

  3. Refresh the page, why are the changes gone ?

<!-- this is a remark -->

<!-- container tag -->
<p>This is the paragraph content</p>

<!-- container tag with attribute-->
<p id="para">This is the paragraph content</p>

<!-- self-closing tag -->
<br/>
  • Container tags
  • Self-closing tags
  • Attributes (name="value")
  • Remarks
  • Text

HTML Anatomy

  • Block elements are positioned on a new line
  • inline elements are positioned one after the other on the same line, the line height is determined by the tallest element (like an image)

Block vs. Inline Elements

Exercise

  1. Use the DevTool selection tool to inspect various elements on a page
  2. Which do you think is block and which is inline ?
  • Whitespace is explicit in HTML
  • Use <br/> or &nbsp; to create it

Whitespace

  • h1-h6
  • p
  • b
  • i
  • pre
  • br
  • code

Text Tags

  • ul

  • ol

  • li

List Tags

Links

<!-- absolute link -->
<a href="http://www.google.com">Google site</a>

<!-- relative links -->
<a href="index.html">Home</a>
<a href="../secondPage.html">Second page</a>
<a href="pages/thirdPage.html">Third page</a>

<!-- target attribute -->
<a href="pages/thirdPage.html" target="_blank">Third page</a>

Links - hash

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <a href="#history">History of the world</a>
    
        <br/>
        Some text here ...
        <br/>
        <br/>
        <h1 id="history">The history of the world</h1>

        <!--link to a specific place in a page-->
        <a href="https://en.wikipedia.org/wiki/Elton_John#Early_life">
            Elton John early life
        </a>        
    </body>
</html>

Anchors can link inside a page also

End

Made with Slides.com