Embed Size (px)
DESCRIPTION
First of many "how to" presentations for web design course.
Citation preview
HTML
Basic
s
Don’t Fe
ar th
e
Code
COMM 270 - Spring 2014
Part
#1
WHAT IS HTML?
HTML HyperText Markup Language
HTML TIMELINE
HTML: 1.0 version (HTML Tags)
only 18 elementsHTML: 2.0 1994HTML: 3 & 4 later 90’sXHTML: 2000 (and still used)HTML5: Began 2004
BASIC WEBPAGE STRUCTURE
<html><head>
<title>This is for the title</title></head>
<body><h1>My Web Site</h1>
<p>All content to be displayed on a browser must be placed between the body tags. There is some type of formatting code around the content.</p>
</body>
</html>
BASIC WEBPAGE STRUCTURE
<!DOCTYPE html> <html>
<head> <meta charset=“utf-8”> <title>HTML body tag learning</title> </head>
<body style="background-color:#00ff66">
<h2>Elements, Attributes, and Values</h2> <br /> <p>Elements are the first part of a tag; Attributes tell what will be effected in a certain manner, values define how the attribute is impacted.</p>
</body> </html>
HMTL FORMATTING TAGS
Common Examples <b>bold tag</b> <i>italic tag</i> <p>paragraph tag</p> <h1>Header (large) <br /> break tag <strong>strong tag</strong> <body style=“background-color:#33cc66”> - always previous to
content
HEADER TAGS
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
The larger the header number the smaller the header.
HOW DOES CSS3 FIT IN?
<h1>Header 1</h1>; <h2>Header 2</h2>; <h3>Header 3</h3> etc…
The limitations of <h1> to <h6>???
CSS3, make text of any size
BASIC WEBPAGE STRUCTURE<!DOCTYPE html> <html> <head> <meta charset="utf-8”> <title>...</title> </head>
<body>
<header role="banner”> <h1>HTML5 Document Structure Example</h1> <p>This page should be tried in safari, chrome or Mozila.</p> </header>
<nav> <ul> <li><a href="http://www.tutorialspoint.com/html">HTML Tutorial</a></li> <li><a href="http://www.tutorialspoint.com/css">CSS Tutorial</a></li> <li><a href="http://www.tutorialspoint.com/javascript">JavaScript Tutorial</a></li> </ul> </nav>
<section> <p>Once article can have multiple sections</p>
</section> <p>This is aside part of the web page</p>
<footer> Created by <a href="http://tutorialspoint.com/">Tutorials Point</a> </footer>
</body></html>
THE INDEX PAGE
The index page is extremely important – you MUST understand why!!!
Browsers cannot display the page unless it has an index page.
All web sites must have an index page – even if their extension is not .html
Analogy: Index to a book, guides you to the page of information you seek … the index.html page to your website works in the same way
Lastly, index.html as well as other pages, should be in lower case and single words.
YOUR FIRST WEB SITE ASSIGNMENT
Create one page.
include 2 paragraphs about yourself.
Change the background color from anything but white
Use the basic HTML structure with paragraph tags.
In addition to the paragraph tag include 5 other HTML tags from your reading.
This will be due at the end of class!!!!
NEXT CLASS
Read the first chapter provided on Moodle.
Come to class prepared to repeat some of what we did, and add more to it.
