Lecture 8

Lecture 8: Beginning HTML
How to make your own (simple) homepage using HTML
But first, a little primer on files

All data in a computer is organized in files. Think of a file cabinet in your room with different named folders which specify content and type This powerpoint lecture is stored as
lecture 9-2010 HTML.ppt
File primer
Graphics files can be stored in a variety of formats.

.jpg .bmp .gif .png
These are but a few of the graphic and image file types
Audio and Video files
Audio files come in several varieties

.au .mp3 .mp4 .cd .wav
And video is commonly stored in mpeg2, avi, wmv, quicktime,
The point being
Any program that uses data needs to know the name and location of the file where the data is kept and also needs to know the format in which it is organized.
In this manner, data can be located and then properly translated for use by the program that needs it.
The Hex Notation System!
Dealing with Binary
Binary numbers in their native notation are not very user friendly
Hex notation is a easier way to depict binary that is easier to deal with Many programs, programming languages allow the use of Hex to denote binary values
Hex Notation
Binary 0000 0001 0010 0011 0100 0101 0110 0111 Hex 0 1 2 3 4 5 6 7 Dec 0 1 2 3 4 5 6 7 Binary 1000 1001 1010 1011 1100 1101 1110 1111 Hex 8 9 A B C D E F Dec 8 9 10 11 12 13 14 15
Hex.
So the Binary number
0010 0001 = 21 Hex =Decimal 33
1010 0100 = A4 Hex =Decimal 164
We will be using some of these concepts when we build our web page
What is HTML?
Hypertext Markup Language (HTML) is a language in which one can tell a browser how to display a web page.
In the simple cases the bulk of the material will be text to display, and the HTML commands will be interspersed in the text, but images are also an important part of the web
HTML is a markup language

standard Text with embedded formatting codes HTML uses paired and unpaired tags tags identify elements or structure of document
text formatted by the tags
example:
<H1>Chapter 1</H1>
TAGS
HTML is Interpreted by your browser
The browser reads and interprets the HTML text (code) in real time
Not all browsers interpret EXACTLY the same way, so results may vary! However, it is very easy to make changes to the HTML code and immediately see the effect.very nice for debugging!
Structure and Syntax
HTML has a very particular structure and syntax However, it is VERY forgiving!
At least in my limited experience
Simple HTML Commands
HTML commands (also called tags) are always enclosed in angle brackets. E.g., <title>
Tags are case insensitive, so <title> and <TITLE> mean the same thing.
Paired HTML Tags
Most HTML tags come in pairs, one for starting

some effect, the other for ending it.
The second tag in the pair is always the same as the first, but preceded by the character /.
For example: <title> War and Peace </title>
Location of HTML Tags
The effect of an HTML tag is usually independent of where it appears when you are editing the HTML file (e.g., does it appear at the start of a line, in the middle, end of a line). So this is just as good. <title> War and Peace </title>
Basic Document Structure

<HTML> signifies an HTML document <HEAD> instructions about the document <Title> </Title> </HEAD> <BODY> visible pages elements go here
end of the HTML document
</BODY> </HTML>
Titles in HTML
titles appear in the title bar of the page titles create a frame of reference for the user
example:
<TITLE>My First Web Page</TITLE>
A Simple HTML Example

<html> Says this is a HTML document <head> The following goes in the header <title> War and Peace </title> </head> Start the main body <body> <h1> Chapter 1 </h1> The end. </body> Chapter 1 gets made into a main heading </html> Close the main body, and the html document
Placement of text in HTML

<body> <h1>Chapter 1</h1> The These two words will still appear on one line, all by end. themselves. </body>
Breaking Lines
<body> <h1>Chapter 1</h1> The <br> This will force the two words to appear on separate lines end. </body>
Headings in HTML
Headings of different weights are used to introduce sections (weights 1-6) Lower number is Heavier weightgo figure!
example:
<H1> Chapter 1 </H1> <H2> My Early Years </H2>

appears as:
Chapter 1
My Early Years
Comments
comments may be added to an HTML file to inform those who would modify or maintain the pages
example: 
Text in HTML
simple text is enclosed in paragraph tags

example:
<P>The rain in Spain stays mainly only the plain.</P>

appears as:
The rain in Spain stays mainly on the plain.
Text in HTML
break tags help to format lines

example:
<P>Roses are red,<BR> violets are blue,<BR> sugar is sweet . . . </P>

appears as:
Roses are red, violets are blue, sugar is sweet . . .
Text in HTML
font faces and other attributes may be specified
example:
<P><FONT FACE=Arial> The rain in Spain stays mainly on the plain. </FONT></P>
appears as: (in Arial)
The rain in Spain stays mainly on the plain.
More Text Formatting

text can be styled using italics and boldface text fonts may be sized either using absolute or relative values special effects are available such as subscripts, superscripts, underlining and color text may also be hidden as comments
Text Styling
create italics using special <I>effects</I> which produces special effects
create boldface using special <B>effects</B> which produces special effects
Text Font Size

font size may be numbered using absolute values between 1 and 7 font size may be sized relatively using +n or -n (where n is some integer)
<FONT SIZE=7> X </FONT> produces
Special Text Effects

examples: X<SUP>2</SUP> produces X2 T<SUB>1</SUB> produces T1 <U>War and Peace</U> by Leo Tolstoy produces War and Peace by Leo Tolstoy <FONT COLOR=RED>red text</FONT> produces red text
Specifying Colors
Can call out certain colors by name
<font color= red>
Or can call them out by Hex Value
<font color = #3399CC
(Which just happens to be sky blue)
The first 2 digits are the Red value, followed by the Green and Blue values 16,777,216 unique values in all!
http://www.anisman.com/html_primer/htrrggbb.htm is a good website with a color chart in hex values
Lists
ordered lists (automatically numbered) unordered lists (bullet points) definition lists (terms and explanations)
Ordered Lists
Outline<BR> <OL> <LI>Introduction <LI>Body <LI>Conclusion <LI>Endnotes </OL>
displayed as: Outline 1. Introduction 2. Body 3. Conclusion 4. Endnotes
Unordered Lists
Types of Lists<BR> <UL> <LI>ordered lists <LI>unordered lists <LI>definition lists </UL> displayed as: Types of Lists ordered lists unordered lists definition lists
Inline Graphics
images that are placed on the page along with text and other elements <IMG SRC =logo.gif> restricted to accepted image file formats (.gif, .jpg, and .png)
Hyperlinks
references to other elements: pages, images, resources, etc. causes automatic request for linked element
example: <A HREF=http://www.cs.brown.edu/courses/ Cs002/> </A>
First DEMOs !
How do I get started?

Create a folder for all your web stuff Use Wordpad or Notepad to write a small document in HTML Save the document as .htm in your web stuff folder The document will save with a browser icon Click on the icon
Very Useful Web Sites with great HTML Tutorials
http://archive.ncsa.uiuc.edu/General/I nternet/WWW/HTMLPrimerP1.html or http://hotwired.lycos.com/webmonkey /authoring/html_basics/

Lecture 8

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Lecture 8

Caricato da

Copyright:

Formati disponibili

Lecture 8: Beginning HTML

How to make your own (simple) homepage using HTML

But first, a little primer on files

lecture 9-2010 HTML.ppt

Graphics files can be stored in a variety of formats.

Audio and Video files

Audio files come in several varieties

And video is commonly stored in mpeg2, avi, wmv, quicktime,

The point being

The Hex Notation System!

Dealing with Binary

So the Binary number

0010 0001 = 21 Hex =Decimal 33

1010 0100 = A4 Hex =Decimal 164

HTML is a markup language

text formatted by the tags

HTML is Interpreted by your browser

Structure and Syntax

At least in my limited experience

Simple HTML Commands

Paired HTML Tags

Most HTML tags come in pairs, one for starting

For example: <title> War and Peace </title>

Location of HTML Tags

Basic Document Structure

<TITLE>My First Web Page</TITLE>

A Simple HTML Example

Placement of text in HTML

<H1> Chapter 1 </H1> <H2> My Early Years </H2>

simple text is enclosed in paragraph tags

<P>The rain in Spain stays mainly only the plain.</P>

The rain in Spain stays mainly on the plain.

break tags help to format lines

<P>Roses are red,<BR> violets are blue,<BR> sugar is sweet . . . </P>

Roses are red, violets are blue, sugar is sweet . . .

font faces and other attributes may be specified

The rain in Spain stays mainly on the plain.

More Text Formatting

Text Font Size

<FONT SIZE=7> X </FONT> produces

Special Text Effects

Can call out certain colors by name

<font color= red>

Or can call them out by Hex Value

<font color = #3399CC

(Which just happens to be sky blue)

http://www.anisman.com/html_primer/htrrggbb.htm is a good website with a color chart in hex values

displayed as: Outline 1. Introduction 2. Body 3. Conclusion 4. Endnotes

example: <A HREF=http://www.cs.brown.edu/courses/ Cs002/> </A>

How do I get started?

Very Useful Web Sites with great HTML Tutorials

http://archive.ncsa.uiuc.edu/General/I nternet/WWW/HTMLPrimerP1.html or http://hotwired.lycos.com/webmonkey /authoring/html_basics/

Potrebbero piacerti anche