THE HITCHHIKERS GUIDE TO HTML Computer Science I Designing technology solutions Mr. Barrett http://thestrategicblogger.com/
What is HTML Hyper Text Markup Language (HTML) is a markup language for describing web pages HTML is used by web developers to create interactive and informative web environments. HTML files are saved using a -- FileName.HTML file type.
Why should you know HTML? Why Know HTML? Because knowing HTML will give you complete control of your web environment, and you will not be limited by what ready-made web design software packages allow you to do. Other web design options: Google Weebly Moonfruit Livecity
What is Dreamweaver Dreamweaver is a coding and development tool designed for web site creation.
What does Dreamweaver offer Dreamweaver offers many icon-driven menus and detailed panels to make it easy for end users to insert and format text, images and media.
The Coding Environment Dreamweaver allows you to create in three different environments: A code-only environment A split view between your code and your design environment Or, the design interface itself
Coding standards W3C The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web. W3C standards define the Open Web Platform for applications so they can be accessed from any device.
URL What does is mean A URL or Uniform Resource Locator, is a code that tells computers where to locate information and files. Examples www.nfl.com http://www.centennialeagles.org/site/default.aspx?pageid=1 http://www.hcpss.org/ file://c:/users/ktaylor/desktop/football.jpg
Creating your Computer Science Folder Log into your computer Once in Windows, click the Windows button to open your Window s menu Click Documents Open your personal drive, signified by your first initial followed by your last name. (Ex. Bbarrett) Once in your personal drive, click the New Folder button at the top of the window Name the folder Computer Science Open you Computer Science folder Once in your Computer Science folder click the New Folder button Name the new folder HTML
Creating your Computer Science Folder You will save all of your webpages in this folder.
HTML INTRODUCTION
When saving to the class folder HTML files must be saved as HTML files, and will be saved in your Computer Science on your personal drive In this class, file names will include your first initial followed by your last name, followed by a space, followed by the name designated for the assignment. Example: Bbarrett Homepage.html Notes: the.html portion of the file name will be added automatically when you save the file as an html file.
The Use of Brackets
HTML Document Type - <HTML> Title - <Title> </Title> Header - <H_(1-7)_> </H_(1-7)_> Paragraph - <p> </p> Body - <Body> </Body> Bold - <B> </B> Underline - <U> </U> Font Size - <Font size=_(any # 1-7)_> </Font> </HTML>
HTML Background color within the body of the code <body> <body bgcolor=#$$$$$$> </body> Text color <font color=#$$$$$$> </font>
Assignment HTML 1 HTML 1 Assignment Title - First Initial (space) Last Name (space) HTML 1 (B Barrett HTML 1) Heading 1 Name and Grade Paragraph 1 I want you to tell me five things about yourself is a biographical form (one paragraph) Heading 2 I want you to tell me about something you are interested in. Paragraph 2 I want you to write me a paragraph telling me more about the something you are interested in. BLUE is my favorite color Save this as: First Initial (space) Last Name (space) HTML 1
Assignment - HTML 1 (example) Mr. Barrett, Alumni University of Maryland College Park Born in Columbia Maryland, Mr. Barrett is a life long Marylander. Mr. Barrett is a fan of both the Baltimore Ravens, Baltimore Orioles, Maryland Terps, and the PSG Football Club. Mr. Barrett a teacher at Centennial High School and is currently working his 6 th year in the career field of education. Mr. Barrett Loves His Dog Mr. Barrett owns a Pitbull/Boxer mixed dog that he loves very much. Mr. Barrett treats his dog as if he is royal, and as a result has spoiled his dog rotten. Sometimes, late at night, Mr. Barrett will walk his dog around Wilde Lake Middle school allowing him to run around without a leash. Mr. Barrett s dog s name Coltrane. Green is Mr. Barrett s favorite color.
THE BUILDING BLOCKS OF WEBPAGE DESIGN Utilizing the <div style= > </div>
Basic Web Page Divisions Divisions are how we section our webpages to create the designs we desire. We piece these divisions together like puzzle pieces. As we create our divisions they will automatically stack on top of each other unless otherwise directed.
Division Stacking <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
Assignment 2 Building Blocks of a Webpage Your assignment is to create a webpage with all of the following sections. To complete this task you are to utilize the: <div> </div> Do this for each of the sections outlined below. Run Jump Swim Talk Read Watch Read Pledge Save as: Bbarrett HTML 2
STYLING DIVISIONS
Styling your Divisions Divisions can me modified to meet the desires of the web designer. Styling sections of your webpage require you to use style tags. Opening Tag <div style= _element: _directive;_ > </div> Closing Tag
Useful Division Tags pt. 1 Format <div style= _element: _directive;_ > Width: -- Expressed in pixels (px) Width: 50px; Height: -- Expressed in pixels (px) Height: 100px; Background Expressed in hexadecimal Background: #000000; Example <div style= width: 50px; height:100px; background: #000000; > </div>
Styling your Divisions The division styling elements, and directives, are variable and are a tool of the designer. <div style= background-color: #$$$$$$; height:$$px; width:$$px; > </div>
Useful Codes Centering components inside of a division: <center> <h2> THE MIDDLE</h2></center> THE MIDDLE
Assignment HTML 3 Your assignment is to create a webpage consisting of three divisions. The firs division will serve as your header, and the second and third divisions will contain a header and paragraph. Division 1 Header Your First and Last name (centered) Must contain a unique background color Use <h2> for the header text size Division 2 and 3 Header and Paragraph Use the text from your HTML 1 assignment to for your headings and paragraphs. Save as: Bbarrett HTML 3
Assignment HTML 3 (specifics) First <Div> Background color: your choice Width: 600px Text-align: center Padding: 5px Second and Third <Div> Background color: your choice Text color: your choice Width: 600px Padding: 5px Save as: Bbarrett HTML 3 Header Text: Your first and last name Second <Div> Text: The heading and paragraph from the first paragraph of your HTML 1 assignment Third <Div> Text: The heading and paragraph from the second paragraph of your HTML 1 assignment
HTML ADVANCED DESIGN
Centering Your Divisions To center your division in a browser, or in another division, use the following element and directive: <div style= margin:0 auto; > </div>
Useful Codes Below is the code enabling web designers to input comments into their HTML code. <!-- My comment -->
Lesson 4: Division Styling Div/Div/Div In order to add pictures, and unique styling to various parts of divisions, we will create divisions within other divisions. When styling divisions within divisions we must be carful. At first glance divisions inside of divisions will look the same and will become confusing. -- Example on next slide
Lesson 4: Division Styling Div/Div/Div <Div style= : ; : ; > <Div style= : ; : ; > </div> </div>
Useful Division Tags pt. 2 Padding, Boarder, Margin The space around your content Margin, boarder and padding are expressed in pixels (px) margin: 100px; boarder: 100px; padding: 100px;
Useful Division Tags pt. 2 Float: right; and Float: left; -- Allows for two divisions to sit next to each other. float: right; float: left; The two inner divisions are the exact same size, however the division on the right is floating right and the other is floating left. The space around the two black divisions can be created using padding or margin directives.
Division Styling The Float Attribute Page Divisions can be positioned utilizing the <div style= float: ; > attribute which allows divisions, or elements, to be pushed to the left, or right, allowing other elements to wrap around them. For this lesson we will be learning the <div style= float:right; > <div style= float:left; >
Useful Division Tags pt. 2 Format <div style= _element: _directive;_ > Margin-top: -- Expressed in pixels (px) Margin-top: 50px; Margin-right: -- Expressed in pixels (px) Margin-right: 100px; Margin-left: Expressed in hexadecimal Margin-left: 50px; Example <div style= width: 50px; height:100px; Margin-top:50px; > </div>
Inserting Images Images can be placed within divisions To input an image into a division select 1) the insert tab on the CS5 tab list 2) select the image option 3) select the image you would like to insert Once an image is placed within a division its size can be manipulated by modifying the width and height of the image.
Making Lists We can make lists utilizing specific tags. The tags for the list you will utilize are unordered lists <ul> </ul> And the components of the list List components <dt> </dt> Example <ul> <dt> </dt> <dt> </dt> <dt> </dt> <dt> </dt> <dt> </dt> </ul>
Assignment: HTML 4 Save as: Bbarrett HTML 4 Your assignment is to add a fourth division to your HTML 3 assignment. Within this fourth division you will include two other division that will be side-by-side.
Assignment: HTML 4 Save as: Bbarrett HTML 4 All of the divisions on your page should be centered to the middle of the browser ( Margin: 0 auto; ) Within the division on the left you will include a picture of something that interest you. AND Within the division on the right, you describe the image to the left. You will include a centered header, and a detailed description of what's in the picture.
Assignment: HTML 4 Save as: Bbarrett HTML 4 Background color: Width: 600px Padding: 5px Color: Height: 300px
Assignment: HTML 4 Save as: Bbarrett HTML 4 Background color: Float: left Width: 295px Height: 300px Background color: Float: right Width: 295px Height: 300px
Save as: Bbarrett HTML 4 Division Division Division Division Division Division
CREATING HYPERLINKS
Creating Hyperlinks To add a hyperlinked image or text to our webpage, you will need the following code: <a href="url">link text</a> Example: <a href= http://www.nfl.com >Link</a> The word Link becomes our link and when clicked will redirect our traffic to the page we specify.
CREATING IMAGES T0 EMBED INTO OUR PAGES
Microsoft PowerPoint Image Design
Assignment: HTML 5
DELETED SLIDES
Lesson 3: Page Divisions Each division (div) can be given a unique style by the designer. Styles include: Background color Text color Text alignment Width Padding the distance between the inside edge of a box and it s content Margin transparent area surrounding the box Border area around the <div>. This area is initially transparent, but width, color, and border style can be added.