Handout1 intro to html

WEBPROG1 – Web Programming 1 (HTML) Prelim PeriodHandout #1

Brief HTML Background

HTML has not been around for many years. November 1990 marks the day of the first web page and back then there were little to no HTML standards to be followed.

A group called the World Wide Web Consortium was formed and have set the standards that are widely accepted

Web Pages

Web pages have many uses. Here are some important facts about why web pages are so useful.

o A cheap and easy way to spread information to a large audience.

o Another medium to market your business.

o Let the world know about you with a personal website!

Important Terms

Tag - Used to specify special regions to the web browser. Tags look like this: <tag>

Element - A type of tag. There are many elements in HTML. Attribute - Used to modify the value of the HTML element. Elements will

often have multiple attributes.

For now just know that a tag is a command the browser interprets, an element is a type of tag, and an attribute customizes an element.

HTML Elements

An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag.

1. <p> - opening paragraph tag 2. Element Content - paragraph content 3. </p> - closing tag

Every webpage contains four basic elements. html, head, title, and body.

The HTML Element

<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document.

If you haven't already, open up Notepad or Crimson Editor and have a new, blank document ready to go. Copy the following HTML code into your text editor.

HTML Code:<html> </html>

Prepared By: RICHARD F. ORPIANO of 5

http://www.crimsoneditor.com/

http://www.w3.org/


Now save your file by Selecting Menu and then Save. Click on the "Save as Type" drop down box and select the option "All Files". When asked to name your file, name it "index.html", without the quotes. Double check that you did everything correctly and then press save. Now open your file in a new web browser so that you refresh your page and see your changes.

The HEAD Element

The <head> element is "next" as they say. As long as it falls somewhere between your <html> tag and your web page content, you're golden. The head functions "behind the scenes." Tags placed within the head element are not directly displayed by browsers. We will be placing the <title> element here and will talk about the other possible elements in a later lesson.

Here's a sample of the initial set up.

HTML Code:<html> <head><title>My WebPage!</title></head></html>

The TITLE Element

Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser.

Here's the html code:

HTML Code:<html> <head><title>My WebPage!</title></head></html>

The BODY Element



The <body> element is where all content is placed. Paragraphs, pictures, tables, etc.

HTML Code:<html> <head><title>My WebPage!</title></head><body>All my content goes here!</body></html>

Beginning HTML Tags

Tags are embedded commands in an HTML document. By placing a tag correctly, you tell the browser what to display and how to display it. Tags come in pairs. First, an opening tag <tag>, followed by a closing tag </tag>.

The tags themselves are not case sensitive, however it is recommend that you type tags in all lowercase.(Lowercase becomes required in XHTML and Dynamic HTML). Remember to double check that you have your closing tags otherwise the browser might interpret your page incorrectly.

HTML Heading Tags

Headings are numbered 1-6, with 1 being the largest heading and 6 being the smallest.

HTML Code:<body><h1>Headings</h1><h2>are</h2><h3>great</h3><h4>for</h4><h5>titles</h5><h6>and subtitles</h6> </body>

Display:



Headings

are

great

for

titles

and subtitles

Attributes

Attributes can be added to nearly every tag and are used to format the tag in some way. We could justify paragraphs, center headings, etc.

Here are some examples of attributes that can be placed inside many HTML tags if not all of them.

Attribute=

"value"

align= "center","left","right","justify"valign= "top","middle","bottom"

HTML Code:<h1 align="center">Centered Heading</h1>

Display:

Center Heading

Paragraph Tag <p>



Use the <p> tag to define paragraphs. The paragraph tag will place a blank line before the first line in a paragraph and after the final line of your paragraph.

HTML Code:<p>Avoid losing floppy disks with important school...</p><p>For instance, let's say you had a HUGE school...</p>

Display:

Avoid losing floppy disks with important school/work projects on them. Use the web to keep your content so you can access it from anywhere in the world. It's also a quick way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far by now) it is easy.

For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.


Handout1 intro to html

Technology

Transcript of Handout1 intro to html