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