Embed Size (px)
Citation preview
HTMLHTMLHyper
Text
Markup
Language
HTMLHTML•HTML is NOT case sensitive
•However, proper coding etiquette if for all <TAGS> to be in ALL CAPS and for text to be in regular sentence form.
Basic HTML TagsBasic HTML TagsEach HTML tag has three basic parts:
1. An open angle bracket (less than sign): <
2. The text and characters that tell Web browsers what to do
3. A closing angle bracket (greater than sign): >
<HTML>
HTML TagsHTML Tags
Many tags are used in pairs (some stand alone)Start tags tell the browser where to turn on particular formatting function (like italics)
<TAG>End tags tell the browser where to turn off the function. They include a slash.
</TAG> (Container Tag)Empty tag - <LI> - Stands Alone
LIFOLIFO
*Important note about paired tags:
Tags have to be LIFO: Last In First Out
It means that the LAST tag you turn on should always be the FIRST you turn off.
<HTML>
<BODY></BODY></HTML>
Three Sections of an HTML DocumentThree Sections of an HTML Document
1. The HTML document
2. The HEAD section
3. The BODY section
HTML SectionHTML Section
<HTML></HTML> The first tag in every HTML document will
always be <HTML>, which tells the Web browsers that everything that follows should be treated as a Web page.
The </HTML> tag tells the browser where the page ends.
HEAD SectionHEAD Section
<HEAD></HEAD> Immediately follows the opening <HTML> tag. Purpose of this section is to provide general information
about a particular Web page. This tag contains the Web page’s title
(<TITLE></TITLE> tags) This section is NOT displayed in the page’s body. Page’s title will appear at the top of the browser window,
in the title bar
BODY SectionBODY Section
<BODY> </BODY>
Follows the HEAD section Contains all of your Web pages content (text,
graphics, etc.)
Saving Web PagesSaving Web Pages
Save every page as a .html or .htm Save main page (home page) as index.htm
This is the filename that servers first try to download. If you save your main page as index.htm, you help ensure that it is the first page that your audience will see.
EXAMPLEEXAMPLE
<HTML> <HEAD><TITLE>I’m at the top of the screen in
the blue area</TITLE> </HEAD> <BODY><H1>Basic Example</H1><H2>This is
basic coding! </H2> </BODY> </HTML>
<HTML>
<HEAD><TITLE>I’m at the top of the screen in the blue area</TITLE> </HEAD>
<BODY> H1>Basic Example</H1>< <H2>This is basic coding! </H2> </BODY>
</HTML>
More HTMLMore HTML By default, browsers read the text of your
Web page as a continuous line of single-spaced text.
Adding White SpaceAdding White Space White space refers to the amount of empty
space on a page. The more white space on a page, the easier it is
to read. Force browsers to break up text by using :
Paragraph tagsLine breaksHorizontal lines
Paragraph Tags <P>Paragraph Tags <P> Add white space between paragraphs <P> adds one line of white space For example: Four score and seven years ago <P> our fathers brought forth <P> on this continent
a new nation, <P> conceived in Liberty, and dedicated to the proposition <P> that all men are created equal.
Would be displayed in a browser as: Four score and seven years ago
our fathers brought forth
on this continent a new nation,
conceived in Liberty, and dedicated to the proposition
that all men are created equal.
Line Breaks<BR>Line Breaks<BR>
Has no ending tag. Used to add a line break without adding any
new space between lines of text.<P> inserts a blank line<BR> no blank line
Example Using <BR>Example Using <BR> Four score and seven years ago <BR> our fathers brought
forth <BR> on this continent a new nation, <BR> conceived in Liberty, and dedicated to the proposition <BR> that all men are created equal.
Would be displayed in a browser as: Four score and seven years ago
our fathers brought forth on this continent a new nation,conceived in Liberty, and dedicated to the proposition that all men are created equal.
<P> the difference <BR><P> the difference <BR> <P> Example Four score and seven years ago <P> our fathers
brought forth <P> on this continent a new nation, <P> conceived in Liberty, and dedicated to the proposition <P> that all men are created equal.
Would be displayed in a browser as: Four score and seven years ago
our fathers brought forth
on this continent a new nation,
conceived in Liberty, and dedicated to the proposition
that all men are created equal.
<BR> Example Four score and seven years ago
<BR> our fathers brought forth <BR> on this continent a new nation, <BR> conceived in Liberty, and dedicated to the proposition <BR> that all men are created equal.
Would be displayed in a browser as: Four score and seven years ago
our fathers brought forth on this continent a new nation,conceived in Liberty, and dedicated to the proposition that all men are created equal.
Horizontal Rules<HR>Horizontal Rules<HR>
Can visually break a page into sections. Use sparingly.
______________________________________
HTML – Style TagsHTML – Style Tags <B></B> specifies that the enclosed text should
be displayed in boldface. <I></I> specifies that the enclosed text should be di
splayed in italics. <U></U> specifies that the enclosed text should be
underlined. These style tags can be combined:
<B> <I>TAG</I> </B> = TAG
Heading Tags<H></H>Heading Tags<H></H>
Emphasizes major topics Adds hierarchy to topics Ability to create up to six levels of headings,
from
high - <H1>TAG</H1> = TAGto
low - <H6>TAG</H6> = TAG
HTML – Aligning TagsHTML – Aligning Tags Web browsers automatically left justify text. Tag for horizontally centering your text:
<P ALIGN=“CENTER”>Text</P><CENTER>text</CENTER>
Tag to right justify text: <P ALIGN=“RIGHT”>Text</P>
ListsLists Unordered Lists – bulleted lists
Lists that do not require any specific order<UL></UL>
Each item in the list has to be identified with a list item tag:<LI></LI>
Example:<P>Spring Classes are as follows:</P><UL><LI>Keyboarding</LI><LI>E-Commerce/Web Design</LI><LI>Information Management</LI></UL>
Ordered ListsOrdered Lists Ordered Lists – numbered lists
Lists that do require a specific order.<OL></OL>
Numbers are automatically inserted.Each item in the list has to be identified with a list item tag:
<LI></LI>Example:
<P>Spring Classes are as follows:</P><OL><LI>Keyboarding</LI><LI>E-Commerce/Web Design</LI><LI>Information Management</LI></OL>
BGCOLOR=###### Add to the <BODY> tag
<BODY BGCOLOR=0000FF> Color is changed by changing the hex code
(0000FF) <BODY BGCOLOR=RED>
Background Color TagBackground Color Tag
Font Color TagFont Color Tag FONT SIZE
<FONT SIZE=“3”></FONT>Size Range: 1-7Default is 3
<FONT COLOR=FFFFFF></FONT> RGB OR HEX NUMBERS FOR COLORS Use the same hex numbers for color
(FFFFFF is white) Or <FONT COLOR=“red”></FONT> <FONT FACE=“ARIAL”> </FONT>
HyperlinkHyperlink
<A HREF=http://www.yahoo.com>visit Yahoo!</A>
visit Yahoo
Hyperlink ColorHyperlink Color Included in the <BODY> Tag LINK Color – the color of the hyperlink of your web page.
LINK=RED VLINK Color (Visited hyperlink)- the color of the hyperlink
once the Web site has been visitedVLINK=BLUE
ALINK Color (Active hyperlink)- the color of the hyperlink once the Web site has been visited
EXAMPLE:
<BODY BGCOLOR = FFFFFF LINK=RED VLINK=BLUE>
IMAGE TAGIMAGE TAG
<IMG SRC=“image.gif”> <BODY BACKGROUND=“IMAGE.GIF”> Gif images (Graphic Interchange Format)
Clip ArtRegular Graphics
Jpeg images (Joint Photographic Experts Group)Photos
Image as a HyperlinkImage as a Hyperlink
<A HREF=“URL”><IMG SRC=“IMAGE.GIF> </A>
Example:<A HREF=HTTP://WWW.EXCITE.COM><IMG SRC=“charlie.jpg”></A>SIZE– <IMG SRC=“IMAGE.GIF HEIGHT=“30” WIDTH=“475”>– Measures in pixels
![Busca130410 [modalità compatibilità] - amcitorino.it20%5Bmodalit%E0%20... · Il counseling yNasce in America alla fine degli anni 40 yPer aiutare i reduci di guerra yPer ... l’arte](https://img.dokumen.tips/doc/110x75/5c6d9bf409d3f21b2e8c0253/busca130410-modalita-compatibilita-205bmodalite020-il-counseling.jpg)
