essentials of html
DESCRIPTION
Essentials of HTML. Instructor: Jeanne Hart. I have been designing web sites for almost 20 years. I worked as a part of a Web Team for the State of NJ Judiciary. I’ m a stickler for proper HTML code! I have a BA in Art History and a Masters in Education in Adult and Distance Learning. - PowerPoint PPT PresentationTRANSCRIPT
Your
Inst
ruct
or
Your
Inst
ruct
or
II have been designing web sites for have been designing web sites for almost 20 years.almost 20 years.
I worked as a part of a Web Team for I worked as a part of a Web Team for the State of NJ Judiciary.the State of NJ Judiciary.
I’m a stickler for proper HTML code!I’m a stickler for proper HTML code! I have a BA in Art History and a I have a BA in Art History and a
Masters in Education in Adult and Masters in Education in Adult and Distance Learning.Distance Learning.
I can be reached by email at: I can be reached by email at: [email protected]@verizon.net
What
you s
hould
What
you s
hould
ex
pect
fro
m m
e
expect
fro
m m
e I will be here on timeI will be here on time
I will teach all 4 classesI will teach all 4 classes
Hopefully I will make Hopefully I will make learning HTML a fun learning HTML a fun experienceexperience
I will always be available I will always be available for helpfor help
I ex
pect
fro
m
I ex
pect
fro
m
you:
you: to be on time to classto be on time to class
to attend all 4 classesto attend all 4 classes
to ask for help if you need to ask for help if you need itit
not to be afraid to offer not to be afraid to offer help help
not to be afraid of HTML not to be afraid of HTML codecode
have fun learninghave fun learning
What’
What’
s th
is c
lass
s th
is c
lass
all
about
all
about
In this class you will In this class you will learn why HTML is so learn why HTML is so important to the important to the internet.internet.
You will also learn the You will also learn the basic tags to create your basic tags to create your first HTML page and first HTML page and learn how to use HTML learn how to use HTML to add text and headings to add text and headings in your Web page and in your Web page and how to format your text.how to format your text.
Why
is t
his
so
Why
is t
his
so
import
ant?
import
ant?
Can’t anyone write for the web?Can’t anyone write for the web?
How
do t
hey
How
do t
hey
work
?w
ork
?
Languages such as Languages such as HTML, serve an HTML, serve an important purpose when important purpose when it comes to sharing it comes to sharing information over long information over long distances.”distances.”
How
does
it w
ork
How
does
it w
ork
co
n’
con’ tt
Your computer has a Web Your computer has a Web browser, such as Internet browser, such as Internet Explorer or FireFox, or Chrome Explorer or FireFox, or Chrome installed on it. First, your installed on it. First, your browser has to find the browser has to find the computer that is storing that computer that is storing that information and it does this information and it does this using the HTTP. using the HTTP. The storage computer, or The storage computer, or server, sends the new web page server, sends the new web page (as a plain text file) back to your (as a plain text file) back to your computer using the same HTTP. computer using the same HTTP. Finally, and this is what you Finally, and this is what you need to know, the browser sees need to know, the browser sees the new Web page and the new Web page and interprets the text and HTML interprets the text and HTML tagstags to show you the to show you the formatting, graphics, and text formatting, graphics, and text that appear on the page.that appear on the page.
Usi
ng W
eb
Usi
ng W
eb
Bro
wse
rsB
row
sers
As great as Web As great as Web browsers are, you should browsers are, you should be aware that they have be aware that they have limitations!limitations!
Bro
wse
rs c
on’t
Bro
wse
rs c
on’t
Some older browsers do not Some older browsers do not understand the newer HTML understand the newer HTML commands and might produce commands and might produce errors rather than text. errors rather than text.
What's more, some of the What's more, some of the newest browsers enable newest browsers enable viewers to determine which viewers to determine which window display sizes, fonts, window display sizes, fonts, and colors they prefer when and colors they prefer when viewing Web pages (even if viewing Web pages (even if those settings are different those settings are different from what you, the Web from what you, the Web author, want them to see) author, want them to see)
Gett
ing C
onnect
ed
Gett
ing C
onnect
ed
You can create Web page files in any You can create Web page files in any plain text editor and view them in any plain text editor and view them in any browser but, you have to decide how browser but, you have to decide how you are going to store the files. you are going to store the files.
You already know that you can't surf the You already know that you can't surf the Net without having an Internet Service Net without having an Internet Service Provider (ISP). Provider (ISP).
In the same way, you need a Web In the same way, you need a Web Presence Provider (WPP) or an ISP or Presence Provider (WPP) or an ISP or your own Web server to store your pages your own Web server to store your pages before they can be viewed from the Web. before they can be viewed from the Web.
Usi
ng G
ood F
orm
Usi
ng G
ood F
orm
#
1#
1Tonight, you will create a template Tonight, you will create a template for yourself that already includes the for yourself that already includes the tags that you need to create your tags that you need to create your first web page. first web page. Then, when ever you want to create Then, when ever you want to create a new Web page you will be able to a new Web page you will be able to open your template file, add your open your template file, add your new text, and save the new file.new text, and save the new file.
Ok
let’
s get
Ok
let’
s get
start
ed!
start
ed!
The next thing you The next thing you have to do is give the have to do is give the page a DOCTYPE, page a DOCTYPE, which by the way is which by the way is the only tag in HTML the only tag in HTML that uses all caps!that uses all caps!
Why, you ask, must I Why, you ask, must I do this?do this?
You a
dd a
Yo
u a
dd a
D
OC
TYPE
DO
CTYPE
beca
use
…beca
use
… Adding a DOCTYPE is Adding a DOCTYPE is
what the browser is what the browser is going to look at first!”going to look at first!”
What
will
the
What
will
the
DO
CTYPE lo
ok
DO
CTYPE lo
ok
like?
like?
<!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 "-//W3C//DTD XHTML 1.0 Transitional//EN" Transitional//EN" "http://www.w3.org/TR/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-/DTD/xhtml1-transitional.dtd"><html transitional.dtd"><html xmlns="http://www.w3.org/199xmlns="http://www.w3.org/1999/xhtml">9/xhtml">
There
3 t
ypes
of
There
3 t
ypes
of
Doct
ype
Doct
ypeThe <!DOCTYPE> tag The <!DOCTYPE> tag
has three variations: has three variations: StrictStrictTransitionalTransitional
Frameset Frameset You declare which one You declare which one
you are using in the top you are using in the top of the file.of the file.
HTML isn ‘t as difficult as HTML isn ‘t as difficult as you might think. It’s a you might think. It’s a language that just language that just includes an opening tag includes an opening tag like this, <p> and a like this, <p> and a closing tag like one</p>closing tag like one</p>
Any guess what the <p> Any guess what the <p> stands for?stands for?
What
exact
ly a
re
What
exact
ly a
re
HTM
L ta
gs?
HTM
L ta
gs?
Cre
ati
ng Y
our
Fir
st P
age
Cre
ati
ng Y
our
Fir
st P
age
You can create Web pages using You can create Web pages using some some WYSIWYG WYSIWYG programs, for programs, for now younow you’ll concentrate on ’ll concentrate on learning HTML and use Note Pad learning HTML and use Note Pad for all your labs.for all your labs.
What
exact
ly a
re
What
exact
ly a
re
the r
equir
ed
the r
equir
ed
ele
ments
?ele
ments
? After the DOCTYPE, After the DOCTYPE, every HTML document every HTML document must begin with the must begin with the <html> <html> tag and end with tag and end with its compliment, the its compliment, the </html> </html> tag. tag.
A w
eb p
age h
as
2
A w
eb p
age h
as
2
part
s!part
s!
All HTML documents are All HTML documents are separated into two parts:separated into two parts:
the the headhead and the and the bodybody.. Because the title Because the title
contains information contains information about the document, the about the document, the <title> and closing <title> and closing </title> tags are placed </title> tags are placed within the opening within the opening <head> and closing<head> and closing
</head> tags.</head> tags.
1. The h
ead t
ag
1. The h
ead t
ag 1.1. The opening The opening <head><head>
tag and the closing tag and the closing
</head></head> tags are used to tags are used to indicate any indicate any information about information about the document itself. the document itself. You'll learn how to You'll learn how to add some of this add some of this information in later information in later lessons.lessons.
2. The t
itle
tag
2. The t
itle
tag 2. The 2. The <title><title> and and </title></title>
tags are used to add a title tags are used to add a title to your browser's Title to your browser's Title bar. The Title bar is the bar. The Title bar is the colored band at the top of colored band at the top of any browser that gives the any browser that gives the name of the html page.name of the html page.
3. The b
ody
tag
3. The b
ody
tag
3. The opening 3. The opening <body><body> tag tag and and the closing the closing </body></body> tags are used to tags are used to surround surround any and all any and all content content that appears that appears in the HTML page.in the HTML page.And, there is only, And, there is only, everever, one opening , one opening body tag and one body tag and one closing!closing!
a s
imple
web
a s
imple
web
page
page
If you were to create a simple HTML page, you If you were to create a simple HTML page, you would see that the four tags we just discussed would see that the four tags we just discussed are present in this documentare present in this document
Doctype – (the doctype always come first in any Doctype – (the doctype always come first in any html document)html document)
<html><html><head><head><title> <title> My First Web PageMy First Web Page
</title></title></head></head><body><body><p> <p> This is my First Web pageThis is my First Web page
</p></p></body></body></html> </html>
You s
hould
know
that
You s
hould
know
that For now, almost all HTML tags For now, almost all HTML tags
come in pairs. come in pairs. You use the first tag in the pair You use the first tag in the pair
(for example, <html>) to tell the (for example, <html>) to tell the computer to computer to start applyingstart applying the format. the format.
You use the second tag (for You use the second tag (for example, </html>) requires a example, </html>) requires a slash in front of the tag name slash in front of the tag name that that tells the computer to tells the computer to stop applying that stop applying that formatformat. .
Tip C
on’t
Tip C
on’t
The first tag is usually The first tag is usually referred to by the name referred to by the name within the bracket, for within the bracket, for example, opening html example, opening html tag. tag.
You can refer to the You can refer to the second tag as the the second tag as the the closing tag, for closing tag, for example, closing html example, closing html tag.tag.
Savi
ng a
nd V
iew
ing
Savi
ng a
nd V
iew
ing
your
page
your
page To view your own page in a To view your own page in a
browser, you must first save browser, you must first save it. Because you've created it. Because you've created an HTML document, you an HTML document, you want to save your file with want to save your file with an .htm extension (first.htm, an .htm extension (first.htm, for example) so that you for example) so that you recognize it quickly.recognize it quickly.
You should also be aware You should also be aware of difference between html of difference between html and htmand htm
Cauti
on
Cauti
on
Some people prefer to Some people prefer to name their HTML files name their HTML files with an .html extension with an .html extension (for example, (for example, first.html). Some older first.html). Some older computer systems, computer systems, however, still require however, still require the file extension to be the file extension to be three characters or three characters or fewer and might have fewer and might have trouble reading (or trouble reading (or storing) a file with a storing) a file with a longer extension.longer extension.
Previ
ew
ing y
our
Previ
ew
ing y
our
page
page
You can preview any HTML file in You can preview any HTML file in your browser, even when that file your browser, even when that file is stored on your computer rather is stored on your computer rather than on a Web server. than on a Web server.
In Internet Explorer, you can view In Internet Explorer, you can view your new file by selecting Open your new file by selecting Open from the File menu and finding from the File menu and finding the page you created to view.the page you created to view.
Para
gra
phs
Para
gra
phs In HTML, a paragraph is created In HTML, a paragraph is created
whenever you insert text between the whenever you insert text between the <p> tags.<p> tags.
<!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 "-//W3C//DTD XHTML 1.0 Transitional//EN" Transitional//EN" "http://www.w3.org/TR/xhtml1/"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/199xmlns="http://www.w3.org/1999/xhtml">9/xhtml">
<head><title><head><title>My HTMLMy HTML PagePage</title></head></title></head> <body><body> <p>This is my first HTML page.</p><p>This is my first HTML page.</p> </body></body> </html> </html>
Para
gra
phs
–
Para
gra
phs
– co
n’
con’ tt Web browsers see Web browsers see
that you want a that you want a paragraph and they paragraph and they display it. display it.
Web browsers don't Web browsers don't pay any attention to pay any attention to how many blank lines how many blank lines you put in your text; you put in your text; they only pay they only pay attention to the HTML attention to the HTML tags. tags.
Para
gra
phs
–
Para
gra
phs
– co
n’
con’ tt In the following HTML In the following HTML
code, you see several lines code, you see several lines of text and even a blank of text and even a blank line, but the browser only line, but the browser only recognizes paragraphs recognizes paragraphs surrounded by the <p> surrounded by the <p> and </p> tags (or and </p> tags (or paragraph tags). The <p> paragraph tags). The <p> tag tells the browser to tag tells the browser to add a blank line before add a blank line before displaying any text that displaying any text that follows it. follows it.
Con’
Con’ tt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">lang="en">
<head><title>Typing Paragraphs in HTML</title><head><title>Typing Paragraphs in HTML</title>
</head></head>
<body><body>
<p>This is the first paragraph. But is this the second?</p> <p>This is the first paragraph. But is this the second?</p>
<p>No, this is.</p><p>No, this is.</p>
</body></body>
</html></html>
Tip
Tip
Web browsers do something else with Web browsers do something else with paragraph text that you should be aware paragraph text that you should be aware of: of:
They wrap the text at the end of the They wrap the text at the end of the browser window. In other words, when the browser window. In other words, when the text in your Web page reaches the edge of text in your Web page reaches the edge of the browser window, it automatically the browser window, it automatically continues on the next line regardless of continues on the next line regardless of where the <p> is located.where the <p> is located.
The <p> tag always adds a blank lineThe <p> tag always adds a blank line, but , but you might not always want a blank line you might not always want a blank line between lines of text. Sometimes you just between lines of text. Sometimes you just want your text to appear on the next line want your text to appear on the next line (such as the lines of an address or a (such as the lines of an address or a poem). You can use a new tag for this: the poem). You can use a new tag for this: the line break, or <br /> tag line break, or <br /> tag
Text
Em
phasi
s
Text
Em
phasi
sYou will occasionally want to You will occasionally want to
add emphasis to your text to add emphasis to your text to make it stand out. make it stand out.
HTML enables you to quickly HTML enables you to quickly apply some standard formats, apply some standard formats, such as boldface and italic, such as boldface and italic, using a predefined set of tags. using a predefined set of tags.
<em> </em> for italics and <em> </em> for italics and <strong> </strong> for bold<strong> </strong> for bold
Cauti
on
Cauti
on
Other formatting tags exist in Other formatting tags exist in HTML, but their use is discouraged HTML, but their use is discouraged in HTML in favor of style sheets. in HTML in favor of style sheets.
Import
ant
term
s
Import
ant
term
s to
rem
em
ber
to r
em
em
ber
Deprecated Tags - Some Deprecated Tags - Some older HTML tags, older HTML tags, specifically related to specifically related to formatting, have been formatting, have been replaced by the replaced by the formatting capabilities of formatting capabilities of style sheets. style sheets.
Style Sheets - Web Style Sheets - Web developers use style developers use style sheets to specify sheets to specify formatting instructions for formatting instructions for a single document or a a single document or a group of documents.group of documents.
Headin
gs
Headin
gs Separating your text into Separating your text into
paragraphs isn't the only paragraphs isn't the only way to format your Web way to format your Web pages. pages.
HTML enables you to add HTML enables you to add six different heading tags six different heading tags to your pages by using the to your pages by using the tags <h1> through<h6>. tags <h1> through<h6>. These tags are very simple These tags are very simple to use. Letto use. Let’s look at them:’s look at them:
Headin
gs
con’t
Headin
gs
con’t
<h1><h1>This is Heading This is Heading 11</h1> </h1> The closing heading tags The closing heading tags also create an automatic also create an automatic paragraph break. In other paragraph break. In other words, all headings words, all headings automatically include a blank automatically include a blank line to separate them from the line to separate them from the text. Heading 1, the <h1> tag, text. Heading 1, the <h1> tag, has the largest font of the has the largest font of the heading tags andheading tags and Heading 6, the <h6> tag, Heading 6, the <h6> tag, has the smallest. In fact, you has the smallest. In fact, you usually only see Web page usually only see Web page authors use the authors use the <h1><h2><h3> <h1><h2><h3> tags tags because the remaining tags, because the remaining tags, <h4><h5><h6>, <h4><h5><h6>, are actually are actually smaller than normal text. smaller than normal text.
Tip
Tip Unless you or the Unless you or the
people viewing your people viewing your pages have adjusted pages have adjusted the browser's default the browser's default settings, normal settings, normal HTML body text HTML body text appears in 12 point appears in 12 point Times New Roman Times New Roman font on most font on most computer systems.computer systems.
Text
form
att
ing
Text
form
att
ing
tags
tags For tonight they will include:
For tonight they will include:
DOCTYPEDOCTYPE
Html tagHtml tag
Head tagHead tag
Title tagTitle tag
Heading tags
Heading tagsParagraph tag <p></p>
Paragraph tag <p></p>Bold tag <strong> </strong>
Bold tag <strong> </strong>
Emphasis tag <em> </em>
Emphasis tag <em> </em>
Tip
Tip Here's a special character Here's a special character
that you should remember: that you should remember:
The symbol stands for The symbol stands for nonbreaking space and is used nonbreaking space and is used to insert a space inside an to insert a space inside an HTML document. HTML document.
HTML ignores extra spaces HTML ignores extra spaces between words and tags so between words and tags so you'll need to have a way of you'll need to have a way of including extra spaces. including extra spaces.
You can do that with the You can do that with the character.character.
Addin
g
Addin
g
Com
ments
Com
ments
A great tag to remember A great tag to remember is the comment tagis the comment tag
It looks like this: <!- - It looks like this: <!- - text goes in here - ->text goes in here - ->
And where the text goes And where the text goes can be any text but it can be any text but it will not be seen by the will not be seen by the browser.browser.
Refr
esh
tag
Refr
esh
tag
If you have a page that you If you have a page that you update several times a day and update several times a day and you want to make sure that you want to make sure that people always see the most people always see the most recent version, you can enter recent version, you can enter the page's own URL in the the page's own URL in the refresh tag. When the browser refresh tag. When the browser sees the refresh tag, it presents sees the refresh tag, it presents the requested URL in the the requested URL in the specified time.specified time.<meta http-equiv="refresh" <meta http-equiv="refresh" content="time in seconds, URL for this page" /> content="time in seconds, URL for this page" />
Why might that be helpful on a Why might that be helpful on a web and on what type of page?web and on what type of page?
Tonig
ht
Tonig
ht ’’s
s Sum
mary
Sum
mary Tonight you learned Tonight you learned about:about:
1.1.The DOCTYPEThe DOCTYPE
2.2.the 4 basic tags to the 4 basic tags to create a web pagecreate a web page
3.3. how to format the how to format the text on your pagestext on your pages
4.4. how to add how to add comments to your web comments to your web pagepage
Sum
mary
for
Sum
mary
for
tonig
ht
tonig
ht
You also learned about:You also learned about:•Web browsersWeb browsers
• the DOCTYPEthe DOCTYPE
• 4 basic tags needed to create web pages4 basic tags needed to create web pages
• the html tag, the head tag, the body tag the html tag, the head tag, the body tag and all their closing tagsand all their closing tags
•Tags to format the text for your web pagesTags to format the text for your web pages