Fundamentals of Web Programming Beginning HTML
Web Browsers (aka. Browsers) 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 Explorer Mozilla Firefox Apple Safari Others? 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 Domain Name Top-Level Domains (TLDs) Directory (Folder) Web Page File Type
Building a web page Three primary components HTML – Content & Structure CSS – Style & Formatting JavaScript – Behavior & Interaction
HTML Tags Tell browser what to do All code must open and close UNIT 1 – Beginning HTML HTML Tags Tell browser what to do All code must open and close Open: <tag> Close: </tag> Case does not matter <tag> = <TAG> Invalid tags are ignored
HTML Tags Common Tags: <HTML> </HTML> UNIT 1 – Beginning HTML HTML Tags Common Tags: <HTML> </HTML> <HEAD></HEAD> <TITLE></TITLE> <BODY></BODY> <FONT></FONT>
Sample Web Site Code… Web Page Shows This… :: :: :: UNIT 1 – Beginning HTML Sample Web Site Code… <!DOCTYPE HTML PUBLIC "-//W3C//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 "-//W3C//DTD HTML 3.2//EN"> <html> <head> <title>This is a Sample Page</title> </head> <body> <!-- Enter HTML Code to Display Here --> : : </body> </html>
Title: My First Web Page Body: UNIT 1 – Beginning HTML Practice It… Start new text file Save As: firstPage.html Title: My First Web Page 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.
Practice It…What it should look like… 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>
Practice It… Open new Text file UNIT Practice It… Open new Text file Save As: PracticeU1_1.html TITLE should be: Practice 1-1 – YOUR NAME 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? Have Mrs. Leimkuehler check your web page.
Fundamentals of Web Programming Lesson 2 – Modifying HTML
Practice It… Open new text file Save As: PracticeU2_1.html UNIT 2- Modifying HTML Practice It… Open new text file Save As: PracticeU2_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
HTML Headings What is a heading? Why are they important on web pages? UNIT 3 – Headings and Paragraphs HTML Headings What is a heading? Why are they important on web pages?
HTML Headings <hN> </hN> <HN> </HN> UNIT 3 – Headings and Paragraphs HTML Headings <hN> </hN> <HN> </HN> “N” symbolizes a number 1-6
HTML Headings Open a new NotePad document Save it as headings.html UNIT 3 – Headings and Paragraphs HTML Headings Open a new NotePad 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: Below existing BODY text, enter: This is normal text. <h1>This is an h1 heading</h1> <h2>This is an h2 heading</h2> <h3>This is an h3 heading</h3> <h4>This is an h4 heading</h4> <h5>This is an h5 heading</h5> <h6>This is an h6 heading</h6>
Your code should look like this… UNIT 3 – Headings and Paragraphs Your code should look like this… <html> <head> <title>Headings Template</title> </head> <body> This is normal text. <h1>This is an h1 heading</h1> <h2>This is an h2 heading</h2> <h3>This is an h3 heading</h3> <h4>This is an h4 heading</h4> <h5>This is an h5 heading</h5> <h6>This is an h6 heading</h6> </body> </html>
HTML Headings Save File As: PracticeU3_1.html Open in your browser UNIT 3 – Headings and Paragraphs HTML Headings Open File PracticeU2_1.html Enter the following after the <BODY> tag, before your name: <h1>About Me</h1> <h2>Name</h2> Before your EMAIL ADDRESS, enter the following: <h2>Email Address</h2> Before your PARENTS/GUARDIANS NAMES, enter the following: <h2>Parents / Guardians</h2> Before your SIBLINGS AND PETS NAMES, enter the following: <h2>SIBLINGS AND PETS</h2> Before your SIBLINGS NAMES, enter the following: <h3>SIBLINGS</h3> Before your PETS NAMES, enter the following: <h3>PETS</h3> Save File As: PracticeU3_1.html Open in your browser
Fundamentals of Web Programming Lesson 4 –Paragraphs
HTML Paragraphs What is there to know? Tags you will see: UNIT 4 –Paragraphs HTML Paragraphs What is there to know? HTML ignores carriage returns (ENTER) Must enter special tag to insert a new line or paragraph Tags you will see: <br> <p> <hr>
HTML Paragraphs INSERT PARAGRAPH BREAKS <p> </p> UNIT 4 –Paragraphs HTML Paragraphs INSERT PARAGRAPH BREAKS <p> </p> INSERT HORIZONTAL RULE <hr> </hr> INSERT LINE BREAKS <br>
Practice Open File PracticeU3_1.html UNIT 4 –Paragraphs Practice Open File PracticeU3_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 1st 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
Most Common Style Tags Bold Italic Font Typeface Font Color Font Size UNIT 5 - Stylizing Font Most Common Style Tags Bold <b></b> Italic <i></i> Font Typeface <font face=“Times New Roman”>Text</font> Font Color <font color=“FF0000”>Text</font> <font color=“red”>Text</font> Font Size <font size=“1”>Text</font>
UNIT 5 - Stylizing Font Making it BOLD 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.
Using Italics Italic text generally used to emphasize text UNIT 5 - Stylizing Font Using Italics 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.
Choosing a Different Font UNIT 5 - Stylizing Font Choosing a Different Font Times New Roman is generally the default “Safe” Fonts: Times New Roman / Times Arial / Helvetica Courier New / Courier Others that usually work: Verdana Georgia Comic Sans MS Trebuchet MS Arial Black Impact
Choosing a Different Font UNIT 5 - Stylizing Font Choosing a Different Font How it works: <html> <head> <title>Example</title> </head> <body> This is normal text. <p> <font face=“Arial”>This text uses Arial font.</font> <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.
I want color! Black is default Web browsers use 216-color palette UNIT 5 - Stylizing Font I want color! Black is default Web browsers use 216-color palette
I want color! 16 color names are browser recognized Aqua Black Blue UNIT 5 - Stylizing Font I want color! 16 color names are browser recognized Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow
I want color! Other colors identified using hexadecimal notation UNIT 5 - Stylizing Font I want color! Other colors identified using hexadecimal notation 6 Digits identify each of 216 colors Examples: FF0000 - Red 66FF00 - Lime Green 0000FF - Blue 000000 - Black FFFFFF - White
I want color! How it works: <html> <head> UNIT 5 - Stylizing Font I want color! How it works: <html> <head> <title>Example</title> </head> <body> This is normal text. <p> <font color=“0000FF”>This is blue text.</font> <font color=“blue”>This is blue text too.</font> </body> </html> This is normal text. This is blue text. This is blue text too.
Font Size Default font size is approximately “12pt” UNIT 5 - Stylizing Font Font Size Default font size is approximately “12pt” Larger text typically used for headings How it works: <html> <head> <title>Example</title> </head> <body> This is normal text. <p> <font size=“7”>This is BIG text.</font> <font size=“1”>This is tiny text.</font> </body> </html> This is normal text. This is BIG text. This is tiny text.
Font Size - NEW TECHNOLOGY UNIT 5 - Stylizing Font Font Size - NEW TECHNOLOGY Font size specified in “pixels” rather than an arbitrary number More control How it works: <html> <head> <title>Example</title> </head> <body> This is normal text. <p> <font size=“25px”>This is BIG text.</font> <font size=“1px”>This is tiny text.</font> </body> </html> This is normal text. This is BIG text. This is tiny text.
Combining the Font Tags! What if we want our text to be colorful and a different font? 2 options: <font color = “FF0000”><font face = “Arial”>This text is blue and Arial</font></font> - OR - <font color = “FF0000” 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!
More Style Options More infrequently used styles: Underline UNIT 5 - Stylizing Font More Style Options More infrequently used styles: Underline <u></u> Example Strike Through <strike></strike> Superscripts <sup></sup> Examplesuperscript Subscripts <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. Can you get them all to work properly? I will be evaluating your ability to properly use each of the tags listed above.