Welcome to the web!

not many spiders here, only bugs.

how does the web work?

parts of a website

the server

a series a tubes

client

the user, usually a browser

the front end

- 3 parts -

HTML, CSS, and JavaScript

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.

An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" and ">". The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be written as <Title>,<TITLE>, or in any other way.

Welcome to class!

<header>Welcome to class!</header>

<header class="welcome-message">
   Welcome to class
</header>

<img src="./images/school.jpg" />

Fine and dandy, but how can I use these to build a website?

this is a paragraph on my site

<p> this is a paragraph on my site </p>

<header>Welcome to my cool Site </header>

<p>Check out what we doo.... </p>

<section>
    <header>Welcome to my Restaurant. </header>

    <p>Check out what we doo.... </p>
</section>

<section>
    <header>Welcome to my Restaurant</header>
    <img src="/food.png"/>
    <p>Check out what we doo.... </p>
</section>

<html>
    <body>
        <section>
            <header>Welcome to my Resturant</header>
            <img src="/food.png"/>
            <p>Check out what we doo.... </p>
        </section>
    </body>
</html>

<html>
    <head>
        <title>My Resturant</title>
    </head>
    <body>
        <section>
            <header>Welcome to my Resturant</header>
            <img src="/food.png"/>
            <p>Check out what we doo.... </p>
        </section>
    </body>
</html>

Cool but what tags do we use?

Semantic HTML

Common Tags

https://sdg.codes/handbook-tags-we-like

Time to get our hands dirty