VSK HTML

Introduction to HTML
VSK.PSG
Contents Getting Started.. What is Internet? What is WWW? What is HTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags
2
Introduction to Web Design

HTML
What is the Internet? The Internet, sometimes called simply "t he Net," is a worldwide system of comp uter networks - a network of networks in which users at any one computer can, if they have permission, get information fr om any other computer
In 1957, the U.S. government formed the Advanced Research Projects Agency (ARPA), a segment of the Department of Defense charged with ensuring U.S. leadership in science and technology with military applications. In 1969, ARPA established ARPANET, the forerunner of the Internet. ARPANET was a network that connected major computers at the University of California at Los Angeles, the University of California at Santa Barbara, Stanford Research Institute, and the University of Utah. Within a couple of years, several other educational and research institutions joined the network. Unlike today, when millions of people have access to the Internet from home, work, or their public library, ARPANET served only computer professionals, engineers, and scientists who knew their way around its complex workings.
What is the World Wide Web? The World Wide Web came into being in 1991, thanks to developer Tim BernersLee. Berners-Lee now directs the World Wide Web Consortium (W3C), a group of industry and university representatives that oversees the standards of Web technology. The most widely used part of the Internet is the World Wide Web (often abbreviated "WWW" or called "the Web"). Its outstanding feature is hypertext, a method of instant cross-referencing. In most Web sites, certain words or phrases appear in text of a different color than the rest; often this text is also underlined. To view files on the Web, you need Web browsing software. You use this software to view different locations on the Web, which are known as Web pages. A group of Web pages is a Web site. The first page of a Web site is often called the home page. Just as each household in the world has a unique address, each Web page in the world has a unique Internet address, sometimes called a URL.
The Basics
Elements and Tags are the basics of any webpage.
Elements
Elements are made up of two tags; a start tag and an end tag. Between these tags is the element content.
<title>Welcome to My World</title>
Start Tags
A start tag is a left angle bracket followed by the name of the element and then a right angle bracket.
<title>
End Tags
End tags are a left angle bracket and a slash followed by the name of the element and then a right angle bracket. The slash allows the computer to distinguish the end tag from the start tag. Tags are case sensitive use lower case letters only.
</title>
Empty Elements
Certain elements are empty and are designated by a slash before the right angle bracket in the start tag.
<br/>
The <br> element is used to insert a line break into the document. This tells the computer to stop the text at that point and start a new line. As you may have guessed the <br> element does not have any content so it does not need an end tag.
Content
Most elements will contain multiple elements. This may sound confusing but it is really very simple. An element that contains another element looks like this:
<head> <title>The document title</title> </head>
Nesting
Nesting means the way in which elements contain elements. When we say that elements are properly nested we mean that each element is completely contained within the elements that contain it, and it completely contains the elements it contains.
Nesting, continued
<em>Peeps is a <strong>fantastic</strong> story.</em> ^ That is perfect HTML <em>Peeps is a <strong>fantastic</em> story. </strong> ^ That is not! Can you spot the error?
The <em> starts outside the <strong> but finishes inside it. The tags are not properly nested.
Required Elements
There are four elements that all HTML documents must contain.
They must have a <head> and they must contain a <title>. They also must have <html> and <body> elements.
<html>
The <html> element contains the whole document. It starts first and finishes last. It tells the computer that this is an <html> document and must always be present.
<head>
The <head> contains elements that are about the document rather than elements that are displayed in the page itself and includes things like the document title.
<title>
The document you must have a <title> which describes what the document is. Without a <title> the document is not valid.
<body>
A last, but certainly not least, the document must have a <body>. The <body> is the Webpage itself. It comes after the <head> and is the only other element that can go in your <html> element. Anything that you want to put in your page goes in here.
Put It All Together

<html> <head> <title>yada yada yada</title> <head> <body> </body> <html>
What the following term mean:

Web server: a system on the internet containg one or more web site Web site: a collection of one or more web pages Web pages: single disk file with a single file name Home pages: first page in website
Think about the followings before working your Web pages.

Think about the sort of information(content) you want to put on the Web. Set the goals for the Web site. Organize your content into main topics. Come up with a general structure for pages and topics.
What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pa ges and other information viewable in a browser The basic language used to write web pages Tags direct how page is to be displayed by browser File extension: .htm, .html Telling the browser what to do, and what props to use. A series of tags that are integrated into a text document. Created by Tim Berners-Lee in 1993 from SGML
22
Tags are :
surrounded with angle brackets like this

<B> or <I>.
Most tags come in pairs

exceptions: <P>, <br>, <li> tags
The first tag turns the action on, and the second turns it off. The second tag(off switch) starts with a forward slash.
For example ,<B> text </B>
can embedded, for instance, to do this:

<HEAD><TITLE> Your text </HEAD></TITLE> it won't work. The correct order is <HEAD><TITLE> Your text </TITLE></HEAD>
not case sensitivity. Many tags have attributes.

For example, <P ALIGN=CENTER> centers the paragraph following it.
Some browsers don't support the some tags and some attributes.
23
Basic HTML Document Format
<HTML> <HEAD> <TITLE>CTS Training at PSG Tech</TITLE> </HEAD> <BODY> Welcome to CTS Training Class </BODY> </HTML>
See what it looks like:
24
How to Create and View an HTML document?

1.Use an text editor such as Notepad / WordPad to write the document. 2.Save the file as filename.html on a PC. This is called the Document Source. 3.Open Internet Explorer (or any browser) Off-Line 4.Click on File, Open File and select the filename.html document that you just created. 6.Your HTML page should now appear just like any other Web page in Internet Explorer.
25
7.You may now switch back and forth between the Source and the HTML Document switch to Notepad with the Document Source make changes save the document again switch back to Internet Explorer click on RELOAD and view the new HTML Document switch to Notepad with the Document Source......
26
Tags in head
<HEAD>...</HEAD>-- contains information about the document <TITLE>...</TITLE>-- puts text on the browser's title bar.
27
Background
Bgcolor Specifies a background-colo r for a HTML page. <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)" > <body bgcolor="black"> Background Specifies a background-ima ge for a HTML page <body background="clouds. gif"> <body background="http:// www.w3schools.com/clouds. gif">
28
TEXT
Put text on a webpage (Paragraph)
<p>Today is first HTML class, Im so excited!</p>
Put text in center of a page

<center>CTS Training</center> <p align=center>CTS Training</p> (or)
Put text on the right of a page

<p align=right>CTS Training</p>
Put text on the left of a page

<p align=left>CTS Training</p>
Text headings
<h1> and </h1> There are six defined heading sizes <h1> (largest) through <h6> (smallest)
Text Example
<html> <header> <title>CTS Training</title> </header> <body> <h1>This is Heading1</h1> <h2>This is Heading2</h2> <h3>This is Heading2</h3> <h4>This is Heading2</h4> <h5>This is Heading2</h5> <h6>This is Heading2</h6> <p>This is an example of a paragraph.</p> </body> </html>
Font
To change text size
<font size=+3>Hello</font> Output: Hello
Tag attribute To change text color

<font color=red>Hello</font> Output: Hello
Using both
<font size=+3 color=red>Hello</font> Output: Hello
Commonly Used Character Entities

Result < > & Description Non-breaking space Less than Greater than Ampersand Quotation mark Copyright Entity Name < > & " ©
HTML Organization
Spacing
Spacing organizes your work! Spacing makes your files easy to read! Spacing makes no functional difference to you r web browser
Comments
Comments are notes in your HTML file Comments make no functional difference to y our web browser  ends it
Tags in Body Let's talk Text Heading: <H1> </H1> Center:<Center> </Center> Line Break <P> ,<Br> Phrase Markups: <I></I> ,<B></B> Create a List Unordered list : <UL><li> Ordered list: <OL><li> Nested
35
List
Unordered list
Code: <ul> <li>Coffee</li> <li>Milk</li> </ul> Output:
Coffee Milk
Ordered list
Code: <ol> <li>Coffee</li> <li>Milk</li> </ol> Output:
1. Coffee 2. Milk
37
Image Formats
.gif
Graphics Interchange Format
.jpeg or .jpg
Joint Photographic Experts Group
.bmp
bitmap
Inserting Image
Place all images in the same directory/folder where your web pages are <img src> is a single tag <img src=image.gif> Turn an image into a hyerlink
<a href=http://www.psgtech.edu><img src=ima ge.gif></a>
Image Size
Computer images are made up of pixels <IMG HEIGHT=100" WIDTH=150" SR C="image.gif">
Height Width
Add Images Use <IMG SRC=imagefilename> tags How to specify Relative pathnames Attributes of IMG tag
-width,height -Alt -Align -<Img src=my.gif width=50 height=50 align=right alt=My image>
41
LIST <html> <header> <title>CTS Training</title> </header> <body> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html>
42
PRE TAG <PRE> if (ab) { doThis(); } else { doThat(); } </PRE>
43
44
45
46
47
48
49
The HTML frame Element The <frame> tag defines one particular window (frame) within a frameset. In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The document "frame_a.htm" is put into the first column, and the document "frame_b.htm" is put into the second column:
<frameset cols="25%,75%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset>

50
<HTML> <HEAD> <TITLE>Great Recipes</TITLE> </HEAD> <FRAMESET ROWS="15%,*"> <FRAME SRC="recipetitlebar.html" NAME=TITLE SCROLLING=NO> <FRAMESET COLS="20%,*"> <FRAME SRC="recipesidebar.html" NAME=SIDEBAR> <FRAME SRC="recipes.html" NAME=RECIPES> </FRAMESET> </FRAMESET> </HTML> <a href ="frame_a.htm" target ="showframe">Frame a</a><br>
51
Forms
A form is an area that can contain form ele ments. <form></form> Commonly used form elements includes:
Text fields Radio buttons Checkboxes Submit buttons
Text Input Fields

Used when you want the user t o type letters, number, etc. <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> Output First name: Last name:
Submission Button
When user clicks on the Su bmit button, the content of t he form is sent to another fil e. <form name="input" action= "html_form_action.asp" met hod="get"> Username: <inp ut type="text" name="user"> <br> <input type="submit" value= "Submit"> </form> Output Username:
Checkboxes
Used when you want the use r to select one or more optio ns of a limited number of ch oices. <form> <input type="checkbox" na me="bike value=bike> I have a bike <br> <input type="checkbox" na me="car value=car> I ha ve a car </form> Output I have a bike I have a car
Radio Buttons
Used when you want the u ser to select one of a limite d number of choices. <form> <input type="radio" name ="sex" value="male"> Ma le <br> <input type="radio" name ="sex" value="female"> F emale </form> Output Male Female
Text Box
Used when you want to get i nput from user. <form> <p>Please provide your sug gestion in the text box belo w:</p> <textarea row=10 cols=3 0> </textarea> </form> Output Please provide your suggesti on in the text box below:
Pull-down Menu
Used when you want user to Output respond with one specific an swer with choices you given. Select a fruit: <p>Select a fruit:</p> <select name="Fruit"> <option selected > Apples <option > Bananas <option> Oranges </select>
Search Quick Tips Use the plus (+) and minus (-) signs in front of words to force their inclusion and/or exclusion in searches. EXAMPLE: +anorexia -bulimia (NO space between the sign and the keyword) Use double quotation marks (" ") around phrases to ensure they are searched exactly as is, with the words side by side in the same order. EXAMPLE: "Bye bye Miss American Pie" (Do NOT put quotation marks around a single word.) Put your most important keywords first in the string. EXAMPLE: +hybrid electric gas vehicle Type keywords and phrases in lower case to find both lower and upper case versions. Typing capital letters will usually return only an exact match. EXAMPLE: president retrieves both president and President Use truncation and wildcards (e.g., *) to look for variations in spelling and word form. EXAMPLE: librar* returns library, libraries, librarian, etc. Combine phrases with keywords, using the double quotes and the plus (+) and/or minus (-) signs. EXAMPLE: +"lung cancer" +bronchitis -smoking (In this case, if you use a keyword with a +sign, you must put the +sign in front of the phrase as
BOOLEAN "AND" The Boolean AND narrows your search by retrieving only documents that contain every one of the keywords you enter. The more terms you enter, the narrower your search becomes. EXAMPLE: truth AND justice EXAMPLE: truth AND justice AND ethics AND congress BOOLEAN "OR" The Boolean OR expands your search by returning documents in which either or both keywords appear. Since the OR operator is usually used for keywords that are similar or synonymous, the more keywords you enter, the more documents you will retrieve. EXAMPLE: college OR university EXAMPLE: college OR university OR campus OR higher education Always enclose OR statements in parenthesis. BOOLEAN "NOT" / "AND NOT" The Boolean NOT or AND NOT limits your search by returning only your first keyword but not the second, even if the first word appears in that document, too. EXAMPLE: bulimia AND NOT anorexia EXAMPLE: cowboys AND NOT dallas NESTING -- WITH BOOLEAN OPERATORS Nesting, i.e., using parentheses, is an effective way to combine several search statements into one search statement. Use parentheses to separate keywords when you are using more than one operator and three or more keywords. EXAMPLE: (scotch OR bourbon) AND NOT (beer OR wine) (For best results, always enclose OR statements in parentheses.)
Additional Resource
http://www.w3schools.com/html/default.asp

VSK HTML

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

VSK HTML

Caricato da

Copyright:

Formati disponibili

Introduction to HTML

Introduction to Web Design

<head> <title>The document title</title> </head>

Put It All Together

What the following term mean:

Think about the followings before working your Web pages.

surrounded with angle brackets like this

Most tags come in pairs

can embedded, for instance, to do this:

not case sensitivity. Many tags have attributes.

Basic HTML Document Format

See what it looks like:

How to Create and View an HTML document?

Put text in center of a page

Put text on the right of a page

Put text on the left of a page

Tag attribute To change text color

Commonly Used Character Entities

PRE TAG <PRE> if (ab) { doThis(); } else { doThat(); } </PRE>

<frameset cols="25%,75%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset>

Text Input Fields

Potrebbero piacerti anche