1 HTML/CSS Tutorial Chapter 1
1 HTML/CSS Tutorial Chapter 1. Agenda Defintion HTML Page strucutre Head Section Body Section Headings Paragraph Preformatted Text Special Charaters Colors.
Jan 03, 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
Chapter 1
Agenda
2
3
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 5.0 is current
4
HTML Page Format
<HTML>
<HEAD><TITLE> Qi’s web! </TITLE>
</HEAD>
<BODY>
<H1> Hello World </H1>
<! Rest of page goes here. This is a comment. >
</BODY>
</HTML>
5
BODY Element
<BODY attributename="attributevalue"> Deprecated attributes (but still used)
BACKGROUND=“Sunset.jpg” (can be tiled) BGCOLOR=color TEXT=color LINK=color (unvisited links) VLINK=color (visited links) ALINK=color (when selected)
6
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
7
Headings
<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>
8
<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
9
<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>
10
<PRE> Preformatted Text
<PRE>if (a < b) { a++; b = c * d;}else { a--; b = (b-1)/2;}</PRE>
11
Special Characters
Character Use
< <
> >
& &
" "
Space
12
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
13
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.
14
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>
15
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>
16
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>
17
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>
18
<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>
19
Naming a Section
<H2> <A NAME="#references"> Our References </A> </H2>
Example
20
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>
21
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
22
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
23
Images
<BODY> <img src="dolphin.jpg" align="left" width="150" height="150" alt="dolphin jump!">
This is a very cute dolphin on the left!<br>This is a very cute dolphin on the left!<br>This is a very cute dolphin on the left!<br>This is a very cute dolphin on the left!<br>This is a very cute dolphin on the left!<br>This is a very cute dolphin on the left!<br>This is a very cute dolphin on the left!<br>This is a very cute dolphin on the left!<br>This is a very cute dolphin on the left!<br>This is a very cute dolphin on the left!<br>You can see text wrap around it<br>
</BODY></HTML>
24
ALIGN="left"
25
ALIGN="right"
26
ALIGN=“bottom"
27
Tables
<TABLE> table tag<CAPTION> optional table title<TR> table row<TH> table column header<TD> table data element
28
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>
29
<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
30
cellspacing=10
cellpadding=10
31
<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)
EX: <TABLE COLS=“40%, *,*”><TABLE ROWS=“*,*”>
32
<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>
33
<TD> Table Cell Attributes
Valid for the table cell:colspan -- how many columns this cell occupiesrowspan – how many rows this cell occupies
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200" border="1"><TR><TD colspan="1" rowspan="2">a</TD><TD colspan="1" rowspan="1">b</TD></TR><TR><TD colspan="1" rowspan="1">c</TD></TR></TABLE>
34
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
35
Frames MARGINWIDTH – left/right margins MARGINHEIGHT – top/bottom margins SCROLLING – yes or 1 adds scroll bar NORESIZE – yes or 1 disables resizing
36
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>
37
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>
38
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>
FORM Tags The <form> tag is used to create an HTML
form for user input. The <form> element can contain one or
more of the following form elements: <input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label>
FORM AttributesAttribute Value Description
accept MIME_typeSpecifies the types of files that the server accepts (that can be submitted through a file upload)
-accept charset character_setSpecifies the character encodings that are to be used for the form submission
action URLSpecifies where to send the form-data when a form is submitted
autocompleteNewonoff
Specifies whether a form should have autocomplete on or off
enctype
application/x-www-form-urlencodedmultipart/form-datatext/plain
Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method getpost
Specifies the HTTP method to use when sending form-data
name text Specifies the name of a form
novalidateNew novalidateSpecifies that the form should not be validated when submitted
target
_blank_self_parent_top
Specifies where to display the response that is received after submitting the form
Example
<form action="demo_form.asp" method="get">First name: <input type="text“ name="fname"><br>Last name: <input type="text" name="lname"><br><input type="submit" value="Submit"></form>
Send Form Data to an E-mail Address
Click where you want to insert a form and type <FORM METHOD=”post”.
Type a space and ENCTYPE=”text/plain”. Type a space and ACTION=”mailto:?”>,
replacing ? with the e-mail address to which you want to send the form data.
Type </FORM>. You can now add input elements to your form between the <FORM> and </FORM> tags.
Add a Text Box
Between the <FORM> and </FORM> tags, add a new line for the text box.
Type <INPUT TYPE=”text”. Type a space and NAME=”?”, replacing ?
with a unique identifier for the text box. 3 Type a space and SIZE=”?”, replacing ? with
a width in characters.To define a maximum number of characters for
the field, type MAXLENGTH=”?”>, replacing ? with the maximum number of characters allowed.
Add a Large Text Area
Between the <FORM> and </FORM> tags, add a new line for the large text box.
Type <TEXTAREA>. Type a space and NAME=”?”, replacing ? with a unique name for
the text area. Type a space and ROWS=”?”, replacing ? with the number of rows
you want to specify to determine the height of the text area. Type a space and COLS=”?”, replacing ? with a number of character
columns to determine the width of the text area. Type a space and WRAP=”?”>, replacing ? with a text wrap control.
soft wraps text within the text area but not in the form results. hard wraps text within both the text area and the form results. off turns off text wrapping, forcing users to add line breaks manually as they type.
Type </TEXTAREA>. You can add a default message between the <TEXTAREA> and
</TEXTAREA> tags.
Add Check Boxes
Between the <FORM> and </FORM> tags, type <INPUT TYPE=”checkbox”.
Type a space and NAME=”?”, replacing ? with a unique name for the check box.
Type a space and VALUE=”?”>, replacing ? with a value to be assigned if the check box is checked.
Type the text you want to appear beside the check box.
Repeat the previous steps to create more check boxes for a group of check box options.
Add Radio Buttons
Between the <FORM> and </FORM> tags, type <INPUT TYPE=”radio”.
Type a space and NAME=”?”, replacing ? with a unique name for the radio button group.
Type a space and VALUE=”?”>, replacing ? with a value describing the radio button.
Type the text you want to appear beside the radio button.
Repeat the previous steps to add more radio buttons to the group, using the same name for all the buttons in a set.
Add a Menu List
Between the <FORM> and </FORM> tags, type <SELECT NAME=”?”, replacing ? with a unique name for the menu.
Type a space and SIZE=”?”>, replacing ? with the height, measured in character lines, for the menu input.
If you want to display a dropdown menu, set the height to 1.
Start a new line and type <OPTION VALUE=”?”>, replacing ? with a descriptive word for the menu item.
Type the text you want to appear in the menu list. Repeat the previous steps to add more menu items to
the list. To make one menu item appear as selected in the list,
type SELECTED after the VALUE attribute. Type </SELECT>.
Add a Submit Button
Between the <FORM> and </FORM> tags, type <INPUT TYPE=”submit”.
Type a space and type VALUE=”?”>, replacing ? with the text you want to appear on the button.
Add a Reset Button
Between the <FORM> and </FORM> tags, type <INPUT TYPE=”reset”.
Type a space and VALUE=”?”>, replacing ? with the text you want to appear on the button.
Add Active Labels
Click inside the tag for the form element you want to label and
type ID=”?”, replacing ? with a descriptive word for the element.
Before the text, type <LABEL FOR=”?”>, replacing ? with the word you assigned in step 1.
Type the label text and then </LABEL>. You can repeat the previous steps to add
more labels.
Change the Tab Order
Click inside the first form element tag and type TABINDEX=”?”, replacing ? with a number representing the element’s position in the tab order.
Repeat the previous step for the remaining elements.
Note: You can type a negative number to exclude an input element from the tab order.
Users can move through your form using in the order you specified.
Add a File Upload Element
Make sure the <FORM> tag method is set to post.
Within the <FORM> tag, type ENCTYPE=”multipart/form-data”.
Type the text you want to appear next to the upload element.
Type <INPUT TYPE=”file”> Type a space and then NAME=”?”, replacing ?
with a name for the input field. Type a space and SIZE=”?”>, replacing ? with
the character length for the size of the input field.
Group Form Elements
Type <FIELDSET> above the first input element you want to place in a group.
Type </FIELDSET> after the last input element you want to place in the group.
Below the <FIELDSET> tag, type <LEGEND. Type a space and ALIGN=”?”>, replacing ?
with an alignment for the group title (left, right, top, or bottom).
Type a title for the group. Type </LEGEND>. You can repeat the previous steps to define
other groups of input elements on your form.
Example of Form
55
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
Types of CSS Styles
1. Internal Styles are defined in the <head> section of the current web page.
2. Inline Styles are defined within the HTML markup of a particular page element. (avoid using)
3. External Styles are defined on the External Style Sheet, which is linked to the web pages(s). (Best choice)
Example<html><head><style>
body {color:red;}h1 {color:#00ff00;}p.ex {color:rgb(0,0,255);}
</style>< link rel="stylesheet" type="text/css" href="mystyle.css"></head><body><h1>This is heading 1</h1><p style="color:sienna;margin-left:20px;">This is a paragraph.</p><p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p><p class="ex">This is a paragraph with class="ex". This text is blue.</p></body></html>
CSS Background Properties
Property Description
background Sets all the background properties in one declaration
-background attachment
Sets whether a background image is fixed or scrolls with the rest of the page
-background color Sets the background color of an element
-background image Sets the background image for an element
-background position Sets the starting position of a background image
-background repeat Sets how a background image will be repeated
Example of CSS Background
<head>body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;} h1 {background-color:#6495ed;}p {background-color:#e0ffff;}</head>
CSS Text PropertiesProperty Description
color Sets the color of text
direction Specifies the text direction/writing direction
-letter spacing
Increases or decreases the space between characters in a text
-line height Sets the line height
-text align Specifies the horizontal alignment of text
-text decoration
Specifies the decoration added to text
-text indent Specifies the indentation of the first line in a text-block
-text shadow Specifies the shadow effect added to text
text-transform
Controls the capitalization of text
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text
Example of CSS Text Properties
body {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;} a {text-decoration:none;} h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}p {text-indent:50px;}
CSS Font PropertiesProperty Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant
Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font
Example of CSS Font Properties
p{font-family:"Times New Roman", Times, serif;}p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}h1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}p.small{font-variant:small-caps;} p.normal {font-weight:normal;}p.thick {font-weight:bold;}p.thicker {font-weight:900;}
CSS Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
In addition, links can be styled differently depending on what state they are in.
The four links states are: a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the user mouses over ita:active - a link the moment it is clicked
Examplea:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */
CSS Links (Continued)Text DecorationThe text-decoration property is mostly used to remove underlines from links:Examplea:link {text-decoration:none;}a:visited {text-decoration:none;}a:hover {text-decoration:underline;}a:active {text-decoration:underline;}Background ColorThe background-color property specifies the background color for links:Examplea:link {background-color:#B2FF99;}a:visited {background-color:#FFFF85;}a:hover {background-color:#FF704D;}a:active {background-color:#FF704D;}
CSS List Properties
Property Description
list-styleSets all the properties for a list in one declaration
list-style-imageSpecifies an image as the list-item marker
list-style-positionSpecifies if the list-item markers should appear inside or outside the content flow
list-style-typeSpecifies the type of list-item marker
Example of CSS List Properties
ul.a {list-style-type: circle;}ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}ul{list-style-image: url('sqpurple.gif');}ul{list-style-position:inside;}
CSS Tables properties
Table Borders To specify table borders in CSS, use the
border property. The example below specifies a black border
for table, th, and td elements: Exampletable, th, td
{border: 1px solid black;}
Example of CSS Tables properties
table {width:100%;}th{height:50px;} td{text-align:right;}td{height:50px;vertical-align:bottom;}td{padding:15px;}table, td, th{border:1px solid green;}th{background-color:green;color:white;}
CSS UnitsUnit Description
% percentage
in inch
cm centimeter
mm millimeter
em
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
exone ex is the x-height of a font (x-height is usually about half the font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
px pixels (a dot on the computer screen)
Color ValuesColor
Color HEX
Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0
rgb(192,192,192)
#FFFFFF rgb(255,255,255)
Related Documents
