Handout1 intro to html


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Handout1 intro to html

  1. 1. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #1Brief 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 acceptedWeb 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 isa type of tag, and an attribute customizes an element.HTML Elements An element consists of three basic parts: an opening tag, the elements 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 havent 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:Prepared By: RICHARD F. ORPIANO Page 1 of 5
  2. 2. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #1 <html> </html> • 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, youre 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. • Heres 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 viewers browser. • Heres the html code: HTML Code: <html> <head> <title>My WebPage!</title> </head> </html>Prepared By: RICHARD F. ORPIANO Page 2 of 5
  3. 3. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #1The 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>Prepared By: RICHARD F. ORPIANO Page 3 of 5
  4. 4. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #1 Display: Headings are great for titles and subtitlesAttributes • 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 HeadingPrepared By: RICHARD F. ORPIANO Page 4 of 5
  5. 5. WEBPROG1 – Web Programming 1 (HTML) Prelim Period Handout #1Paragraph 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, lets say you had a HUGE school...</p>Display:Avoid losing floppy disks with important school/work projects on them. Use the webto keep your content so you can access it from anywhere in the world. Its also aquick way to write reminders or notes to yourself. With simple html skills, (the onesyou have gained so far by now) it is easy.For instance, lets 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" floppydisk. However, there is an alternative. Place your documents, photos, essays, orvideos onto your web server and access them from anywhere in the world.Prepared By: RICHARD F. ORPIANO Page 5 of 5