HTML BASICS CSS STYLE By Jeff Deetman and

HTML BASICS & CSS STYLE By; Jeff Deetman and Kayla Luther September 13, 2019 ACM – Computer Science Club Meeting

BEFORE WE START • Create a public folder that will store all the webpage files as well as any pictures. • Such as C: UserskluthDesktopwebpage This will be your file path from your computer

HTML FILE STRUCTURE <!DOCTYPE HTML> <html> <head> </head> <body> </html> Open a Notepad window. Type the HTML tags to the Notepad.

WEB PAGE DEVELOPMENT CYCLE EDIT and SAVE the file in your file C: UserskluthDesktopwebpageindex. html TEST by BROWSING to the page file: ///C: /Users/kluth/Desktop/webpage/index. html THE YELLOW TEXT SHOULD BE YOUR OWN FILE PATHS

ADDING TEXT TO YOUR HTML FILE <HTML> <HEAD> <TITLE>My home page</TITLE> </HEAD> <BODY> My name is your name. My major is your major. </BODY> </HTML>

MAKING PARAGRAPHS <HTML> <HEAD> <TITLE>My home page</TITLE> </HEAD> <BODY> My name is your name. My major is your major. I am creating this page for the Computer Science Club and will be modifying this page. Please visit again! </BODY> </HTML>

MORE HTML TAG PAIRS • tag pair is for underline • tag pair is for italic style. • <H 1> </H 1> • … • <H 6> </H 6> are headlines with different sizes.

CREATING A LINK Make this a link to the Computer Science Club Home page My name is your name My major is your major I am creating this page for Computer Science Club and will be modifying this page. Please visit again! Question: what is the HTML tag for Links?

QUESTION: WHAT IS THE HTML TAG FOR LINKS? • HTML links are hyperlinks. • You can click on a link and jump to another document. • When you move the mouse over a link, the mouse arrow will turn into a little hand. <a href="https: //www. w 3 schools. com/html/">Visit our HTML tutorial</a> • Use the <a> element to define a link • Use the href attribute to define the link address • Use the target attribute to define where to open the linked document

MORE THINGS TO DO • Make a bullet list for your favorite things in AUM. Change the font of this list to “Times New Roman” • Changing page properties: • Set background color for the page. • What else can you change for the page properties? • Download a AUM logo, save to your web folder and insert to the top of your page. Question: what is the HTML tag for Images?

QUESTION: WHAT IS THE HTML TAG FOR IMAGES? • Use the HTML <img> element to define an image • Use the HTML src attribute to define the URL of the image • Use the HTML or CSS width and height attributes to define the size of the image • Use the CSS float property to let the image float <img src="smiley. gif" alt="Smiley face“ style="float: right; width: 42 px; height: 42 px; "> The image will float to the right of the text.

PROBLEMS • The Tags only provided limited formatting. • H 1 is always that big. • Links always have an underscore. • You can manually change the format for all the H 1 headlines, but what about your have 100 pages in your web site? • Can we customize the HTML tags?

CASCADING STYLE SHEETS (CSS) • What is style? • Style is a list of formatting instructions. • A Cascading Style Sheet is a file with a list of formatting instructions. • CSS style sheets are the modern way to control the appearance and layout of your web pages. • 4. 0 and up Navigator and IE fully support CSS.

CASCADING STYLE SHEET • Enter the following text into a new Notepad document h 2 { font-family : Tahoma; color : blue; text-align : center; } • Save the document in the commons folder as mainstyles. css • Save as file type Text Document

MODIFYING CSS STYLES h 2 { font-family : Tahoma; color: blue; text-align: center; text-transform : uppercase; } body { font-family : Courier New; background-color : #FFEEDD; color : #777733; }

SEPARATION OF CONTENT AND PRESENTATION • Content • Use tags like <h 1>, <h 2>, , or <li> to indicate the structure of your pages • Presentation • Use a CSS style sheet to determine how the tags are formatted • Advantage of separation • Changing the formatting only requires editing the style sheet

MORE INFORMATION • If you would like more information and tutorials please visit https: //www. w 3 schools. com/ or email the computer science club @ compsicclub@aum. edu • The Computer Science website is : • http: //aumcompsci. acm. org/index. html

JEFF’S WEBPAGE SAMPLE <!DOCTYPE html>  <html> <head> <title>Web Dev Workshop</title> <link rel="stylesheet" type="text/css" href="mainstyles. css"> </head> <body>  <h 1>Hello!</h 1> <hr /> <h 2>Welcome to the ACM meeting!</h 2> <hr /> Hope y'all are having a good time!

SAMPLE CONT. Check out this other <a href="page 2. htm">page</a>! <hr /> Here are some neat boats: <img height="300 px" title="This is a pretty cool picture of boats. " alt="boats" src="boats. jpeg" /> A list of my favorite movies: <ol> <li>Mulan</li> <li>Titanic</li> <li>Pee. Wee's Grand Adventure</li> <li>Please don't judge me : )</li> </ol>

SAMPLE CONT. <h 3 title="Favorite TV shows list">My favorite TV shows allegedly: </h 3> <ul> <li>Bates Motel</li> <li>Futurama</li> <li>Bob's Burgers</li> </ul> My favorite quadratic equation: y = x2 + 4 x + 3 </body> </html>

JEFF’S PAGE 2 SAMPLE <DOCTYPE! html> <head> <title>Page 2</title> </head> <body> <h 1>This is page 2!</h 1> Click <a href="index. htm">here</a> to go back to page 1. Click <a href="https: //www. google. com" target="_new">here</a> to go to Google! </body> </html>

JEFF’S CSS SAMPLE body { background-color: lightblue; } h 1 { color: red; text-align: center; } p{ font-family: arial; font-size: 20 px; border: }