1 html/css tutorial chapter 1. agenda defintion html page strucutre head section body section...

HTML/CSS Tutorial

Chapter 1

Agenda

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

HTML Page Format

<HTML>

</HEAD>

<BODY>

<H1> Hello World </H1>

<! Rest of page goes here. This is a comment. >

</BODY>

</HTML>

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)

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

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>

<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

<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>

<PRE> Preformatted Text

Special Characters

Character Use

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

<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.

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>

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>

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>

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>

<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>

Naming a Section

<H2> <A NAME="#references"> Our References </A> </H2>

Example

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>

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

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

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>

ALIGN="left"

ALIGN="right"

ALIGN=“bottom"

Tables

<TABLE> table tag<CAPTION> optional table title<TR> table row<TH> table column header<TD> table data element

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>

<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

cellspacing=10

cellpadding=10

<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=“*,*”>

<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>

<TD> Table Cell Attributes

Valid for the table cell:colspan -- how many columns this cell occupiesrowspan – how many rows this cell occupies

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

Frames MARGINWIDTH – left/right margins MARGINHEIGHT – top/bottom margins SCROLLING – yes or 1 adds scroll bar NORESIZE – yes or 1 disables resizing

Frames

</FRAMESET>

Frames

<FRAMESET ROWS="25%,75%"

</FRAMESET>

Frames

</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

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

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)

1 html/css tutorial chapter 1. agenda defintion html page strucutre head section body section...

text text text text

cute dolphin

left edge text flows

headings text

text of line

left default

text wrap

right edge text flows

Documents

html basic - pydiuma.files.wordpress.com · html basic...

fluid strucutre interaction

s- capital strucutre and firm value

html css php (my)sql - academiepro.com · html plan 1 html...

sovereign wealth funds governance strucutre and investment...

t.s. krupa€¦ · t.s. krupa author tkrupa@tskrupa.com...

orginization strucutre training

dynamic html dyn-html dynamic html

dna strucutre and replication

an analysis of the main charaters’...

lanyon property vault gds information loading all captions...

html 5 - ucg.ac.me … · html –past, present, future...

html introduction to html tags. html document my first html...

market strucutre

cis 264 - asp tim brown. .html www .html www .html www

introduction to html basic structure of a html page text...

steel strucutre - junaidarrasyid's blog · mezzanine floors...

html&css 2 - intermediate html

html frames and html forms

federal tax strucutre india