Fundamentals of Web Programming Beginning HTML Web Browsers
Fundamentals of Web Programming Beginning HTML
Web Browsers (aka. Browsers) n n n Needed in order to view web pages Interprets and displays web pages and enables you to interact with a web page Many available: ¨ Microsoft Internet ¨ Mozilla Firefox ¨ Apple Safari ¨ Others? n Explorer Use a Uniform Resource Locator (URL)
Web Browsers URL in address bar
Uniform Resource Locators (URLs) (aka, “links”, “hyperlinks”) http: //www. solonschools. org/mypage/index. html Protocol Sub-Domain Name Top-Level Domains (TLDs) Directory (Folder) Web Page File Type
Building a web page n Three primary components ¨ HTML – Content & Structure ¨ CSS – Style & Formatting ¨ Java. Script – Behavior & Interaction
UNIT 1 – Beginning HTML Tags Tell browser what to do n All code must open and close n ¨ Open: ¨ Close: <tag> </tag> Case does not matter <tag> = <TAG> n Invalid tags are ignored n
UNIT 1 – Beginning HTML Tags n Common Tags: ¨ <HTML> </HTML> ¨ <HEAD></HEAD> ¨ <TITLE></TITLE> ¨ <BODY></BODY> ¨ <FONT></FONT>
UNIT 1 – Beginning HTML Sample Web Site Code… <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 3. 2//EN"> <html> <head> <!-- Enter Header Code to maintain information about the page here --> </head> <body> <!-- Enter HTML Code to Display Here --> : : : </body> </html> Web Page Shows This… : : :
UNIT 1 – Beginning HTML Sample Web Site Code… <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 3. 2//EN"> <html> <head> <title>This is a Sample Page</title> </head> <body> <!-- Enter HTML Code to Display Here --> : : : </body> </html>
UNIT 1 – Beginning HTML Practice It… n Start new text file ¨ Save As: first. Page. html Title: My First Web Page n Body: In this lesson you are building your first web page! Congratulations! Remember, you need to use the tags from this lesson in every web page you build. n
UNIT 1 – Beginning HTML Practice It…What it should look like… <HTML> <HEAD> <TITLE> My First Web Page </TITLE> </HEAD> <BODY> In this lesson you are building your first web page! Congratulations! Remember, you need to use the tags from this lesson in every web page you build. </BODY> </HTML>
UNIT Practice It… n Open new Text file ¨ Save As: Practice. U 1_1. html n TITLE should be: Practice 1 -1 – YOUR NAME n In BODY write a paragraph (2 -3 sentences) answering the following questions: ¨ What purpose does the HEAD section serve? ¨ What goes in the BODY section? ¨ What happens if you use invalid tags? ¨ Why do we use a text editor to write HTML? n Have Mrs. Leimkuehler check your web page.
Fundamentals of Web Programming Lesson 2 – Modifying HTML
UNIT 2 - Modifying HTML Practice It… n n n Open new text file ¨ Save As: Practice. U 2_1. html THE TITLE should be Practice 2 -1 YOUR NAME IN THE BODY: ¨ Write your name, class period, email address, parents names, and names of siblings and/or pets. Press ENTER after each. ¨ Press ENTER 3 times, write a paragraph about what you plan to do after high school.
Fundamentals of Web Programming Lesson 3 – Headings
UNIT 3 – Headings and Paragraphs HTML Headings What is a heading? n Why are they important on web pages? n
UNIT 3 – Headings and Paragraphs HTML Headings <h. N> </h. N> n <HN> </HN> n “N” symbolizes a number 1 -6 n
UNIT 3 – Headings and Paragraphs HTML Headings n n n Open a new Note. Pad document Save it as headings. html Create a basic web page with the 4 required tags Make the TITLE: Headings Template In the BODY section, enter the following: This is normal text. <h 1>This is an h 1 heading</h 1> n Below existing text, enter: <h 2>This is an h 2 BODY heading</h 2> <h 3>This is an h 3 heading</h 3> <h 4>This is an h 4 heading</h 4> <h 5>This is an h 5 heading</h 5> <h 6>This is an h 6 heading</h 6>
UNIT 3 – Headings and Paragraphs Your code should look like this… <html> <head> <title>Headings Template</title> </head> <body> This is normal text. <h 1>This is an h 1 heading</h 1> <h 2>This is an h 2 heading</h 2> <h 3>This is an h 3 heading</h 3> <h 4>This is an h 4 heading</h 4> <h 5>This is an h 5 heading</h 5> <h 6>This is an h 6 heading</h 6> </body> </html>
UNIT 3 – Headings and Paragraphs HTML Headings n n n n n Open File Practice. U 2_1. html Enter the following after the <BODY> tag, before your name: <h 1>About Me</h 1> <h 2>Name</h 2> Before your EMAIL ADDRESS, enter the following: <h 2>Email Address</h 2> Before your PARENTS/GUARDIANS NAMES, enter the following: <h 2>Parents / Guardians</h 2> Before your SIBLINGS AND PETS NAMES, enter the following: <h 2>SIBLINGS AND PETS</h 2> Before your SIBLINGS NAMES, enter the following: <h 3>SIBLINGS</h 3> Before your PETS NAMES, enter the following: <h 3>PETS</h 3> Save File As: Practice. U 3_1. html Open in your browser
Fundamentals of Web Programming Lesson 4 –Paragraphs
UNIT 4 –Paragraphs HTML Paragraphs n What is there to know? ¨ HTML ignores carriage returns (ENTER) ¨ Must enter special tag to insert a new line or paragraph n Tags you will see: ¨ ¨ <p> ¨ <hr>
UNIT 4 –Paragraphs HTML Paragraphs n n n INSERT PARAGRAPH BREAKS <p> </p> INSERT HORIZONTAL RULE <hr> </hr> INSERT LINE BREAKS
UNIT 4 –Paragraphs Practice n n Open File Practice. U 3_1. html In the area where you wrote about your plans after high school, add the following: ¨ Insert a Paragraph Break after the first paragraph of information (or after the 1 st sentence if you don’t have a full paragraph!) ¨ Insert a Line Break before the last sentence. At the top of the page, after the ABOUT ME heading, insert a horizontal rule. Save the file and open it in a browser.
Fundamentals of Web Programming Lesson 5 - Stylizing Font
UNIT 5 - Stylizing Font Most Common Style Tags n Bold ¨ <b></b> n Italic ¨ <i></i> n Font Typeface ¨ <font n face=“Times New Roman”>Text</font> Font Color ¨ <font color=“FF 0000”>Text</font> ¨ <font color=“red”>Text</font> n Font Size ¨ <font size=“ 1”>Text</font>
UNIT 5 - Stylizing Font Making it BOLD n n n Bold text generally used for headings or emphasized text Large blocks of text should not be bold How it works: <html> <head> <title>Example</title> </head> <body> This is normal text. <p> <b>This is bold text. </b> </body> </html> This is normal text. This is bold text.
UNIT 5 - Stylizing Font Using Italics n n n Italic text generally used to emphasize text Large blocks of text should not be italic How it works: <html> <head> <title>Example</title> </head> <body> This is normal text. <p> <i>This is italic text. </i> </body> </html> This is normal text. This is italic text.
UNIT 5 - Stylizing Font Choosing a Different Font n n Times New Roman is generally the default “Safe” Fonts: ¨ Times New Roman / Times ¨ Arial / Helvetica ¨ Courier New / Courier n Others that usually work: ¨ Verdana ¨ Georgia ¨ Comic Sans MS ¨ Trebuchet MS ¨ Arial Black ¨ Impact
UNIT 5 - Stylizing Font Choosing a Different Font n How it works: <html> <head> <title>Example</title> </head> <body> This is normal text. <p> <font face=“Arial”>This text uses Arial font. </font> <p> <font face=“Comic Sans MS”>This is Comic Sans. </font> </body> </html> This is normal text. This text uses Arial font. This is Comic Sans.
UNIT 5 - Stylizing Font I want color! n n Black is default Web browsers use 216 -color palette
UNIT 5 - Stylizing Font I want color! n 16 color names are browser recognized n n n n Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow
UNIT 5 - Stylizing Font I want color! n Other colors identified using hexadecimal notation ¨ 6 Digits identify each of 216 colors ¨ Examples: n n n FF 0000 - Red 66 FF 00 - Lime Green 0000 FF - Blue 000000 - Black FFFFFF - White
UNIT 5 - Stylizing Font I want color! n How it works: This is normal text. <html> <head> <title>Example</title> </head> <body> This is normal text. <p> <font color=“ 0000 FF”>This is blue text. </font> <p> <font color=“blue”>This is blue text too. </font> </body> </html> This is blue text too.
UNIT 5 - Stylizing Font Size n n n Default font size is approximately “ 12 pt” Larger text typically used for headings How it works: <html> <head> <title>Example</title> </head> This is normal text. This is BIG text. This is tiny text. <body> This is normal text. <p> <font size=“ 7”>This is BIG text. </font> <p> <font size=“ 1”>This is tiny text. </font> </body> </html>
UNIT 5 - Stylizing Font Size - NEW TECHNOLOGY n n Font size specified in “pixels” rather than an arbitrary number ¨ More control How it works: <html> <head> <title>Example</title> </head> This is normal text. This is BIG text. This is tiny text. <body> This is normal text. <p> <font size=“ 25 px”>This is BIG text. </font> <p> <font size=“ 1 px”>This is tiny text. </font> </body> </html>
Combining the Font Tags! n n What if we want our text to be colorful and a different font? 2 options: <font color = “FF 0000”><font face = “Arial”>This text is blue and Arial</font> - OR <font color = “FF 0000” face = “Arial”>This text is blue and Arial too!</font> What’s the difference? We only open the <font> tag one time, we just use multiple modifiers (color and face). Therefore, we only have to close the </font> tag one time rather than two!
UNIT 5 - Stylizing Font More Style Options n More infrequently used styles: ¨ Underline n n <u></u> Example ¨ Strike n n Through <strike></strike> Example ¨ Superscripts n n <sup></sup> Examplesuperscript ¨ Subscripts n n <sub></sub> Examplesubscript
Try it! Create a basic web page that utilizes headings, font color/size/face, bold, and italic, paragraph breaks, line breaks, and a horizontal rule. n Can you get them all to work properly? n I will be evaluating your ability to properly use each of the tags listed above. n
- Slides: 40