AKRON
WOMEN IN TECH

PRESENTS

INTRO TO
HTML

WHAT IS A

Browser?

A Browser

is a computer application that allows the user to view and interact with webpages on the Internet

 

Examples are Internet Explorer, Chrome, Firefox and Safari

WHAT IS

HTML?

HTML

stands for HyperText Markup Language. Web page content is "marked up" with tags that browsers know how to interpret. Pages are also linked together with "Hyper Text" links.

WHAT IS

a TAG?

An HTML TAG

is an element of the HTML language that defines the structure of an HTML page. Tags have attributes to define their behavior and appearance

WHAT IS

CSS?

CSS

stands for Cascading Style Sheets. These files are efficient ways to apply the same style to web sites that have multiple pages for a consistent look and feel.

How does it

work?

The browser

sends a request to a server when an address is entered. The server returns an HTML page that the browser knows how to display by reading the tags and style sheets.

DOCTYPE

The first line of an HTML file is the <!DOCTYPE ...> declaration that tells the browser what version of HTML is being used.

 

HTML 4.01 used 3 different types, strict, transitional and frameset, HTML 5.01 uses only one

STRUCTURE

<html>
   <head>
   </head>
   <body>
   </body>
</html>

<html>

The document root is defined by the set of <html></html> tags. All site content must be between these two tags. 

<head>

The head section is for non-visible page content. The title gets defined here, any meta data relating to the page, scripts and links to stylesheets are included here

Examples of <head> tags

<meta> tags

tell search engines what you're about

 

<title> tag

tell browsers what to call your page

<body>

The document body contains the  visible content of a web page. All visible parts of a web page need to go between the <body></body> tags

Examples of <body> tags

<p></p> =  a new paragraph

 

<h1></h1> = heading-style font

 

<img src"...."> = pictures!!

<div> and <section>

HTML 4.01 documents can be divided into sections. Each <div> element can have a different style and behavior

HTML 5.01 solves this by introducing new, more specific tags

STYLE TAGS

HTML 4.01 provides tags for styling, such as <strong> and <em>. However these tags may be deprecated in later versions of the language. The best solution is to use CSS

CSS STYLE

can be done in the tag's style attribute or as an included file. When looking at the maintenance aspect, the CSS file is the best way to go!
 

Examples of CSS tags

body {
    background-color: #d3d3d3;
}

h1 {
    color: #ffa500;
    text-align: center;
}

p {
    color: navyblue;
}

Why CSS?

CSS was created for simplicity and making updates easier.

Imagine you have a website with 25 pages to it.

Now imagine you want to change your paragraph font color to blue for the whole website.

With straight HTML, you have to go into each page and add/edit tags to make the <p> color blue. 25 times.

With CSS, you just change the CSS page. Once.

Done!

Example: CSS vs HTML

Let's make our headings bold and our paragraphs italicized

HTML (for each heading/paragraph on each page)

 

 

CSS (for one page)

<h1><strong>I'm a heading!</strong></h1>
<p><em>And I'm a paragraph -- woopdidoo</em></p>

h1   {
    font-weight: bold;
}
p     {
    font-style: italic;
}

References

QUESTIONS?