1 HTML/CSS Tutorial Alfred C. Weaver
1 HTML/CSS Tutorial Alfred C. Weaver. 2 Definitions WWW -- a software infrastructure layered on top of the Internet HTTP -- HyperText Transport Protocol,
Jan 13, 2016
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
HTML/CSS Tutorial
Alfred C. Weaver
2
Definitions WWW -- a software infrastructure layered on
top of the Internet HTTP -- HyperText Transport Protocol,
layered on top of TCP HTTPS -- secure HTTP using encryption HTML -- HyperText Markup Language,
version 4.01 is current
3
Definitions HTML/CSS
does describe appearance and layout does not enforce an exact look is interpreted (rendered) by the browser some browser options can override HTML settings some CSS settings can override browser options
4
HTML 4.01 Definition HTML defined by World Wide Web (w3)
consortium http://www.w3.org/TR/REC-html40/
5
Creating and Publishing HTML
Create an HTML document by hand, using Notepad automatically, using FrontPage
Publish to a public_html directory Set protections to allow world-wide read Access through
http://hostname/~username/filename.html
6
Validation If in doubt about syntax, validate
http://validator.w3.org/ http://www.htmlhelp.com/tools/validator/
The supplied HTML is validated based upon the DOCTYPE definition
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
7
HTML Page Format
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Transitional//EN>
<HTML>
<HEAD>
<TITLE> Page Title Goes Here </TITLE>
</HEAD>
<BODY>
<H1> Main Heading of Page is Often First </H1>
<! Rest of page goes here. This is a comment. >
</BODY>
</HTML>
8
HEAD Section Elements BASE -- explicitly specify a base URL
<BASE HREF="http://www.virginia.edu"> <A HREF="../file.html">
META -- information about the document <META name="Author" content="Weaver">
SCRIPT -- defines or points to a program to be run <SCRIPT TYPE="text/javascript"> … </SCRIPT> <SCRIPT
SRC="http://hostname/filename"></SCRIPT>
9
BODY Element
<BODY attributename="attributevalue"> Deprecated attributes (but still used)
BACKGROUND=uri (can be tiled) TEXT=color LINK=color (unvisited links) VLINK=color (visited links) ALINK=color (when selected)
10
Headings
<H1 ...> text </H1> -- largest of the six<H2 ...> text </H2><H3 ...> text </H3><H4 ...> text </H4><H5 ...> text </H5><H6 ...> text </H6> -- smallest of the six
ALIGN="position" --left (default), center or right
11
Headings
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD> <TITLE>Document Headings</TITLE></HEAD><BODY>Samples of the six heading types:<H1>Level-1 (H1)</H1><H2 ALIGN="center">Level-2 (H2)</H2><H3><U>Level-3 (H3)</U></H3><H4 ALIGN="right">Level-4 (H4)</H4><H5>Level-5 (H5)</H5><H6>Level-6 (H6)</H6></BODY></HTML>
12
Headings
13
<P> Paragraph <P> defines a paragraph Add ALIGN="position" (left, center, right) Multiple <P>'s do not create blank lines Use <BR> for blank line Fully-specified text uses <P> and </P> But </P> is optional
14
<BODY><P>Here is some text </P><P ALIGN="center"> Centered text </P><P><P><P><P ALIGN="right"> Right-justified text<! Note: no closing /P tag is not a problem></BODY>
15
<PRE> Preformatted Text
<PRE>if (a < b) { a++; b = c * d;}else { a--; b = (b-1)/2;}</PRE>
16
Special Characters
Character Use
< <
> >
& &
" "
Space
17
Unicode The Unicode organization
http://www.unicode.org/ The Unicode encodings
http://www.unicode.org/charts/ Example: © is © Example: ™ is ™
18
Colors Values for BGCOLOR and COLOR
many are predefined (red, blue, green, ...) all colors can be specified as a six character
hexadecimal value: RRGGBB FF0000 – red 888888 – gray 004400 – dark green FFFF00 – yellow
19
Fonts
<FONT COLOR="red" SIZE="2" FACE="Times Roman">This is the text of line one </FONT><FONT COLOR="green" SIZE="4" FACE="Arial">Line two contains this text </FONT><FONT COLOR="blue" SIZE="6" FACE="Courier"The third line has this additional text </FONT>
Note: <FONT> is now deprecated in favor of CSS.
20
Ordered (Numbered) Lists
<OL TYPE="1"> <LI> Item one </LI> <LI> Item two </LI> <OL TYPE="I" > <LI> Sublist item one </LI> <LI> Sublist item two </LI> <OL TYPE="i"> <LI> Sub-sublist item one </LI> <LI> Sub-sublist item two </LI> </OL> </OL></OL>
21
Unordered (Bulleted) Lists
<UL TYPE="disc"> <LI> One </LI> <LI> Two </LI> <UL TYPE="circle"> <LI> Three </LI> <LI> Four </LI> <UL TYPE="square"> <LI> Five </LI> <LI> Six </LI> </UL> </UL></UL>
22
Physical Character Styles
<H1>Physical Character Styles</H1><B>Bold</B><BR><I>Italic</I><BR><TT>Teletype (Monospaced)</TT><BR><U>Underlined</U><BR>Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR><SMALL>Smaller</SMALL><BR><BIG>Bigger</BIG><BR><STRIKE>Strike Through</STRIKE><BR><B><I>Bold Italic</I></B><BR><BIG><TT>Big Monospaced</TT></BIG><BR><SMALL><I>Small Italic</I></SMALL><BR><FONT COLOR="GRAY">Gray</FONT><BR><DEL>Delete</DEL><BR><INS>Insert</INS><BR>
23
Logical Character Styles
<H1>Logical Character Styles</H1><EM>Emphasized</EM><BR><STRONG>Strongly Emphasized</STRONG><BR><CODE>Code</CODE><BR><SAMP>Sample Output</SAMP><BR><KBD>Keyboard Text</KBD><BR><DFN>Definition</DFN><BR><VAR>Variable</VAR><BR><CITE>Citation</CITE><BR><EM><CODE>Emphasized Code</CODE></EM><BR><FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR><ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM>
24
<A> Anchors (HyperLinks)Link to an absolute URL:
If you get spam, contact <A HREF="htttp:www.microsoft.com">Microsoft </A> to report the problem.
Link to a relative URL:
See these <A HREF="#references"> references </A>concerning our fine products.
Link to a section within a URL:
Amazon provided a <A HREF="www.amazon.com/#reference">reference for our company. </A>
25
Naming a Section
<H2> <A NAME="#references"> Our References </A> </H2>
26
Hyperlinks
<BODY><H3>Welcome to <A HREF="http://www.cs.virginia.edu"><STRONG>Computer Science</STRONG></A>at the <A HREF="www.virginia.edu">University of Virginia.</A></H3></BODY>
27
Images
<BODY><FONT SIZE="6" FONT="Arial" COLOR="Blue">This is a picture of your instructor for CS453. <IMG SRC="http://www.cs.virginia.edu/~acw/weaver.jpg" ALIGN="left" WIDTH="150" HEIGHT="200"> His name is Alfred Weaver and his office is OLS 207. His telephone is 982-2201 and his email is [email protected]. His research specialty is protecting the privacy and security of medical data by using web services to implement authentication, authorization, and federation. This work has been supported for two years by Mr. David Ladd at Microsoft Research (Redmond, WA) and has just been renewed for an additional two years. This work was demonstrated at Microsoft's annual Faculty Summit in August 2003 and again in August 2004.</FONT></BODY>
28
Align=position
Image/Text Placement
Left Image on left edge; text flows to right of image
Right Image on right edge; text flows to left
Top Image is left; words align with top of image
Bottom Image is left; words align with bottom of image
Middle Words align with middle of image
Images
29
ALIGN="left"
30
ALIGN="right"
31
ALIGN="top"
32
ALIGN="middle"
33
ALIGN="bottom"
34
Images SRC is required WIDTH, HEIGHT may be in units of pixels or
percentage of page or frame WIDTH="357" HEIGHT="50%"
Images scale to fit the space allowed
35
Tables
<TABLE> table tag<CAPTION> optional table title<TR> table row<TH> table column header<TD> table data element
36
Tables
<TABLE BORDER=1> <CAPTION>Table Caption</CAPTION> <TR><TH>Heading1</TH> <TH>Heading2</TH></TR> <TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR> <TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR> <TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR></TABLE>
37
<TABLE> Element Attributes
ALIGN=position -- left, center, right for table BORDER=number -- width in pixels of border
(including any cell spacing, default 0) CELLSPACING=number -- spacing in pixels between
cells, default about 3 CELLPADDING=number -- space in pixels between
cell border and table element, default about 1 WIDTH=number[%]-- width in pixels or percentage of
page/frame width
38
<TABLE> Element Attributes
BGCOLOR=color -- background color of table, also valid for <TR>, <TH>, and <TD>RULES=value -- which internal lines are shown; values are none, rows, cols, and all (default)FRAME=value -- which external lines are shown; values are all, void (none), above (top), below (bottom), hsides (top and bottom), vsides (left and right), lhs (left), and rhs (right)
39
<TR> Table Row Attributes
Valid for the table row:ALIGN -- left, center, rightVALIGN -- top, middle, bottomBGCOLOR -- background color
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200"><TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD><TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD><TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD></TABLE>
40
Frames Frames help control navigation and display <FRAME> attributes include
FRAMEBORDER – yes or 1 for borders FRAMESPACING – width of border BORDERCOLOR – color SRC – location of HTML to display in frame NAME – destination for TARGET attribute
41
Frames MARGINWIDTH – left/right margins MARGINHEIGHT – top/bottom margins SCROLLING – yes or 1 adds scroll bar NORESIZE – yes or 1 disables resizing
42
Frames
<FRAMESET ROWS="75%,25%">
<FRAMESET COLS="*,*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET>
<FRAMESET COLS="*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET>
</FRAMESET>
43
Frames
44
Frames
<FRAMESET ROWS="25%,75%"
<FRAMESET COLS="*,*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET>
<FRAMESET COLS="*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET>
</FRAMESET>
45
Frames
46
Frames
<FRAMESET ROWS="*,*">
<FRAMESET COLS="15%, 2*, *"> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> </FRAMESET>
<FRAMESET COLS="40%, *"> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> </FRAMESET>
</FRAMESET>
47
Frames
48
HTML See more HTML examples in our virtual labs http://www.cs.virginia.edu/cs453
49
Cascading Style Sheets A powerful way to specify styles and
formatting across all documents in a web site Style sheets can be specified inline or as a
separate document Helps to keep a common look and feel
50
CSS CSS definition from W3C
Cascading Style Sheets, level 2 revision 1CSS 2.1 Specification
W3C Candidate Recommendation 25 February 2004 http://www.w3.org/TR/2004/CR-CSS21-20040225/ http://www.w3.org/TR/2004/CR-CSS21-20040225/
CSS tutorial from W3schools http://www.w3schools.com/css/default.asp
CSS examples from Core Web Programming
51
CSS General form:
selector {property: value} or
selector {property1: value1; property2: value2; ... propertyn: valuen }
52
CSS
H1 {text-align: center; color: blue; font: Arial, Times New Roman}
P {text-align: left; color: red; font-family: Tahoma, Arial Narrow; font-style: italics}
53
Fizzics1 (no style sheet)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD> <TITLE>New Advances in Physics</TITLE></HEAD><BODY><H1>New Advances in Physics</H1><H2>Turning Gold into Lead</H2>In a startling breakthrough, scientist B.O. "Gus" Fizzics has invented a <STRONG>practical</STRONG> technique for transmutation! For more details, please see <A HREF="give-us-your-gold.html">our transmutation thesis</A>....
</BODY></HTML>
From: Core Web Programming, Marty Hall and Larry Brown, © 2002
54
Fizzics1
From: Core Web Programming, Marty Hall and Larry Brown, © 2002
55
Fizzics2 (with style sheet)
<HEAD> <TITLE>Document Title</TITLE> <STYLE TYPE="text/css">BODY { background: URL(images/confetti-background.jpg) } H1 { text-align: center; font-family: Blackout } H2 { font-family: MeppDisplayShadow } STRONG { text-decoration: underline }</STYLE> </HEAD>
From: Core Web Programming, Marty Hall and Larry Brown, © 2002
56
Fizzics2 (with style sheet)
From: Core Web Programming, Marty Hall and Larry Brown, © 2002
57
CSS See more CSS in our virtual labs http://www.cs.virginia.edu/cs453
Related Documents
