7 th Grade Web Page Design Mrs. Roberts 3 rd Trimester, 2017

Transcription

1 7 th Gade Web Page Design Ms. Robets 3 d Timeste, 2017 Class Objectives 1. Lean how to ceate and edit a web page using HTML & CSS. You web page will be you thid timeste book epot. 2. Ceate a web page that contains the following infomation and/o web page elements. 3 paagaphs of infomation on you book 1 quote fom you book 1 title, using a lage font size than you paagaphs, and centeed 1 gaphic (pictue) elated to you book 1 list (bulleted o numbeed) 1 hypelink 2 o moe diffeent fomatting styles (bold, italic, etc) 1 o moe font faces (Times New Roman, Aial, Centuy Gothic, etc) 2 text colos (othe than black) Title Ba 1 maquee 1 backgound name (fist name, last initial only), ight aligned Fo Technology, students will be gaded on thei weekly homewok assignments and web page poject. Students will also be given an English gade fo the ough daft and final witing of this poject. Questions? See me o me at lobets@csdo.og. Fo due dates, lesson assignments, and othe pinted mateials fo this class go to the Holy Rosay website, find the Technology web page, and click on 7th Gade Web Design. Web Design Booklet 2017.doc Apil 10, 2017

2 Book Repot Web Page Checklist Add CSS style definitions to you web page fo these featues (in any ode unless noted): Title Ba says the name of you book. Comment tag at beginning of code that includes you fist name last initial, tech peiod, and assignment numbe. 1 centeed title with lage text than you paagaphs. The title must be the name of you book. 3 paagaphs of infomation (see you Book Repot equiements sheet). Paagaph size must be at least 4 o 5 sentences (choose a good font colo & font size). 1 quote fom a chaacte in you book. You must include who said the quote. 2 o moe font faces (examples: Comic Sans MS, Centuy Schoolbook, Times New Roman, Aial, Centuy Gothic, etc). 2 (o moe) diffeent fomatting styles (bold, italic, o undeline). 2 (o moe) font colos fo text othe than black (ed, blue, maoon, navy, teal, magenta, etc). Make sue you text can be ead! Note: Maquee text does NOT count as one of you colos. A backgound colo o patten (that allows you to ead the text). You backgound CANNOT have a pictue in it. 1 maquee pomoting you book. It cannot be just the name of you book. It should be moe than 4 wods and you must use pope gamma and punctuation. Be ceative! 1 list (bulleted o numbeed) on book details. List must include: 1) gene, 2) setting, 3) date of publication, 4) numbe of pages, and 5) audience. Example: Gene: Science Fiction 1 pictue elating to you book (autho, book, chaacte). 1 hypelink to a web site fo you book. (If the link is had to see you must change the font colo. See Hypelink Colos ) You fist name and last initial, ight aligned, at vey bottom of page. TextEdit file pinted out fo teache. Be sue to have the comment tag at the beginning of you code that includes you fist name last initial, tech peiod, and assignment numbe. TextEdit file saved to coect location on seve (see below fo instuctions on tuning in you completed you web page). Also, save you TextEdit file to you flashdive. Web Design Booklet 2017.doc Apil 10, 2017

3 Tuning in You Completed Web Page File When you web page is complete, please follow these steps fo tuning it in. 1. Veify that you TextEdit file has the coect filename. You will be gaded on a coect file name. It should be you fist name and last initial followed by Web Page.htm. Fo example: ChisP Web Page.htm 2. On the Gade 7 file seve, save you file to the coect location. In Documents go to the Robets Technology folde and then click on Final Web Pages. Save you file hee. Please NOTE: If you make any changes, you must edit the file in THIS location, and also pint out a new TextEdit file. Web Design Booklet 2017.doc Apil 10, 2017

4 Saving You Web Page fo the 1 st Time (on an imac) 1. Connect to the file seve fo 7th gade and plug in you flash dive. You will be saving you file to both places each time. 2. On the Mac, stat TextEdit. If you ae NOT in the Media Cente do these steps. If you ARE in the Media Cente skip to step 3. a. Click on the TextEdit menu and select Pefeences Make sue you ae in the New Document tab. Unde Fomat make sue Plain Text is selected. b. Still within Pefeences, click the Open and Save tab. Unde When Opening a File: make sue both options ae checked. c. Close the dialog by clicking on the ed button. 3. Save you file in 2 places by clicking on the File menu and selecting Save As Flash Dive: Click on you flash dive. 7 th Gade File Seve: Click on you file seve and then click on Student Foldes/7A o 7B Web Design. 4. Fo the filename, use you fist name and last initial followed by Web Page.htm. No special chaactes ae allowed in name. The extension is impotant! Fo example: ChisP Web Page.htm 5. Click Save. (*It is equied that you save you.htm file to both the seve and you flash dive) Web Design Booklet 2017.doc Apil 10, 2017

5 Editing & Viewing You Web Page on imacs 1. Log on to you file seve (gade 7). O if you web page is on a flash dive, plug it in. Be sue you have the most cuent vesion of you code. 2. Stat TextEdit. Click on the File menu, select Open and find you file. (You cannot just double click on it!) 3. Stat Safai. Click on the File menu and select Open File Find you HTML file and click Open. You file should be displayed as a web page window. 4. Make you Safai window smalle and adjust you windows on the sceen so that you can see both Safai and TextEdit at the same time. Close othe Safai windows that ae open. 5. Click on TextEdit. Type in you code. Click on the File menu and select Save. 6. Click on the Safai window. Click the Reload Page icon (o Apple- R ) to efesh you page. You should see you changes. 7. Continue making changes in TextEdit, saving the file and eloading the page in Safai to view you wok. Web Design Booklet 2017.doc Apil 10, 2017

6 Editing You Web Page on Micosoft Windows 1. In Windows, click on the Stat menu, click All Pogams, click on the Accessoies folde and select Notepad. 2. Click on the File menu and select Open Find you file on you flash dive. 3. Stat Intenet Exploe. Click on the File menu and select Open Click the Bowse button to find you file. Once you ve found it click Open. You should see you web page. 4. Go back to Notepad. Type in you code. Click on the File menu and select Save. (Note: You file must emain with the.htm extension, not.txt). 5. Go back to Intenet Exploe. Click the View menu and select Refesh (F5) efesh you page. You should see you changes. 6. Continue making changes in Notepad, saving the file and efeshing the page in Intenet Exploe to view you wok. NOTE: Make sue you file gets saved back to you file seve at school! Web Design Booklet 2017.doc Apil 10, 2017

7 Copying HTML Code fom Othe Websites Do you see a cool way of displaying text on a website that you like? Would you like to use it on you web page? If so, follow these diections. To copy HTML Code fom a website: 1. Place you mouse ove a text aea (not a pictue). On the Mac, hold down the Contol key and Click you mouse. On the PC, ight mouse click. 2. Select View Souce. You will see the HTML code of the entie page (pobably moe than you want!). 3. If you know what pat of the code you want, you can highlight that pat with you mouse. O to select the entie page, click on the Edit menu and choose Select All. 4. Click on the Edit menu and select Copy. 5. You can open up you web page, o open up a new document (in Wod, fo example). Click on the Edit menu and select Paste to copy the code into you web page. 6. Modify the code to you liking! Web Design Booklet 2017.doc Apil 10, 2017

8 Table of Contents Leaning About HTML & CSS Basic HTML Tags... 2 HTML Elements (html, body, heading, paagaph)... 3 Title Ba, Comment, Paagaphs... 5 Foced Line Beak, Maquee...6 Stating You Web Page - CSS Syntax... 8 CSS Selectos... 9 CSS Comments CSS Style Sheet CSS Colos CSS Backgounds Text Colo, Alignment, Decoation Font Family, Style, Size CSS Links CSS Lists Adding Pictues to You Webpage Web Design Booklet 2017.doc 4/10/2017 Page 1

9 Tag <html> <title> <body> <h1> to <h6> <p> <b> <h> Basic HTML Desciption Defines an HTML document Defines a title fo the document Defines the document's body Defines HTML headings Defines a paagaph Insets a single line beak Defines a thematic change in the content <!-- text --> Defines a comment <b> <q> <u> <img> <a> <ul> <ol> <li> <style> <head> Defines bold text Defines a shot quotation Defines text that should be stylistically diffeent fom nomal text Defines an image Defines a hypelink Defines an unodeed list Defines an odeed list Defines a list item Defines style infomation fo a document Defines infomation about the document Web Design Booklet 2017.doc 4/10/2017 Page 2

10 HTML Elements HTML documents ae made up by HTML elements. HTML elements ae witten with a stat tag, with an end tag, with the content in between: <tagname>content</tagname> The HTML element is eveything fom the stat tag to the end tag: <p>my fist HTML paagaph.</p> Stat tag <h1> <p> <b> Element content My Fist Heading My fist paagaph. Line beak </h1> </p> End tag No end tag (does not contain any content) All HTML documents consist of nested HTML elements. HTML elements can be nested (elements can contain elements). This example contains 4 HTML elements: Example <!DOCTYPE html> <html> <body> <h1>my Fist Heading</h1> <p>my fist paagaph.</p> </body> </html> Web Design Booklet 2017.doc 4/10/2017 Page 3

11 HTML Example Explained The <html> element defines the whole document. It has a stat tag <html> and an end tag </html>. These ae the vey fist and vey last tag you should type in you code. The <body> element defines the document body and goes between the <html> tags. This element holds the content of you web page, the pat uses will see. It has a stat tag <body> and an end tag </body>. These must always be used in you code. <html> <body> </body> </html> Two othe HTML elements ae <h1> and <p>. These elements go between the <body></body> tags. The <h1> element defines a heading. It has a stat tag <h1> and an end tag </h1>. The element content is: My Fist Heading. <h1>my Fist Heading</h1> The <p> element defines a paagaph. It has a stat tag <p> and an end tag </p>. The element content is: My fist paagaph. <p>my fist paagaph.</p> <body> <h1>my Fist Heading</h1> <p>my fist paagaph.</p> </body> Web Design Booklet 2017.doc 4/10/2017 Page 4

12 Title Ba Fo simple web pages, all that s usually equied in the HEAD section ae the tags fo the title ba. It should be shot and desciptive. This tag is also used by seach indexes. If you want Holy Rosay School in you title ba, type this code afte you <html> tag: <head> </head> <title> Holy Rosay School </title> Comment The COMMENT tag is used to inset comments in the souce code. Comments ae not displayed in the bowses. You can use the comment tag to label o explain you code, which can be helpful when you o someone else edits you code. <!-- Comments go hee --> Paagaphs Wheneve you have moe than one sentence of witing, you should have paagaphs and will need to use the paagaph tag. <p> This is a web page. How do you like what I ve done? Please me with any suggestions. </p> The esult is: This is a web page. How do you like what I ve done? Please me with any suggestions. Web Design Booklet 2017.doc 4/10/2017 Page 5

13 Foced Line Beaks <b> Thee ae many cases in which you want to end typing on one line, and stat on the next. To do this, you the <b/> tag. This is one of the few commands you don t have to put an ending command on, because it does not contain any content. Hello,<b />how<b />ae<b />you? The esult is: Hello, how ae you? Don't Foget the End Tag Even though some HTML elements will display coectly if you foget the end tag, it is good pactice to put you end tags in you code. Maquee A maquee is text that stats at one pat of the sceen and floats acoss to the left. You can specify the diection, colo, numbe of times it appeas, and othe attibutes. To include a blue maquee with white text in Times New Roman, use the MARQUEE tag within the body tag and to fomat the text, use the CSS code within the head tag as follows: Web Design Booklet 2017.doc 4/10/2017 Page 6

14 <html> <head> <style> #MaqueeText { colo: Magenta; </style> </head> <body> font-size: 40px; font-family: Chalkboad; <maquee bgcolo=lightblue diection=left loop=infinite> <p id=maqueetext>read this book if you ae inteested in suspense and action!!</p> </maquee> </body> </html> Web Design Booklet 2017.doc 4/10/2017 Page 7

15 Stating You Web Page What is CSS? CSS stands fo Cascading Style Sheets CSS descibes how HTML elements ae to be displayed on sceen, pape, o in othe media HTML was ceated to descibe the content of a web page, like: o <h1>this is a heading</h1> o <p>this is a paagaph.</p> CSS is used to define styles fo you web pages, including the design, layout and vaiations in display fo diffeent devices and sceen sizes. IMPORTANT: When tags like <font>, and colo attibutes wee added to the HTML 3.2 specification, it stated a nightmae fo web developes. Development of lage websites, whee fonts and colo infomation wee added to evey single page, became a long and expensive pocess. To solve this poblem, the Wold Wide Web Consotium (W3C) ceated CSS. CSS emoved the style fomatting fom the HTML page! CSS Saves a Lot of Wok! CSS Syntax A CSS ule-set consists of a selecto and a declaation block: The selecto points to the HTML element you want to style. The declaation block contains one o moe declaations sepaated by semicolons. Each declaation includes a CSS popety name and a value, sepaated by a colon. A CSS declaation always ends with a semicolon and declaation blocks ae suounded by culy baces. Web Design Booklet 2017.doc 4/10/2017 Page 8

16 CSS Selectos CSS selectos ae used to "find" (o select) HTML elements based on thei element name, id, class, attibute, and moe. The element Selecto The element selecto selects elements based on the element name. You can select all <p> elements on a page like this (in this case, all <p> elements will be cente-aligned, with a ed text colo): <head> <style> p { text-align: cente; colo: ed; </style> </head> <body> <p>evey paagaph will be affected by the style.</p> <p id="paa1">me too!</p> <p>and me!</p> </body> Web Design Booklet 2017.doc 4/10/2017 Page 9

17 The id Selecto The id selecto uses the id attibute of an HTML element to select a specific element. The id of an element should be unique within a page, so the id selecto is used to select one unique element! To select an element with a specific id, wite a hash (#) chaacte, followed by the id of the element. The style ule below will be applied to the HTML element with id="paa1": <head> <style> #paa1 { text-align: cente; colo: ed; </style> </head> <body> <p id="paa1">hello Wold!</p> <p>this paagaph is not affected by the style.</p> </body> Gouping Selectos If you have elements with the same style definitions, like this: h1 { text-align: cente; colo: ed; Web Design Booklet 2017.doc 4/10/2017 Page 10

18 h2 { text-align: cente; colo: ed; p { text-align: cente; colo: ed; It will be bette to goup the selectos, to minimize the code. To goup selectos, sepaate each selecto with a comma. In the example below we have gouped the selectos fom the code above: Example h1, h2, p { text-align: cente; colo: ed; CSS Comments Comments ae used to explain the code, and may help when you edit the souce code at a late date. Comments ae ignoed by bowses. A CSS comment stats with /* and ends with */. Comments can also span multiple lines: Example p { colo: ed; /* This is a single-line comment */ text-align: cente; /* This is a multi-line comment */ Web Design Booklet 2017.doc 4/10/2017 Page 11

19 CSS How To... When a bowse eads a style sheet, it will fomat the HTML document accoding to the infomation in the style sheet. Thee Ways to Inset CSS Thee ae thee ways of inseting a style sheet: Extenal style sheet-change the look of an entie website by changing just one file Intenal style sheet-used if one single page has a unique style Inline style-used to apply a unique style fo a single element Fo this class, you will be using Intenal style sheet. Intenal Style Sheet Intenal styles ae defined within the <style> element, inside the <head> section of an HTML page: Example <head> <style> body { backgound-colo: linen; h1 { colo: maoon; magin-left: 40px; </style> </head> Inline Styles To use inline styles, add the style attibute to the elevant element. The style attibute can contain any CSS popety. Web Design Booklet 2017.doc 4/10/2017 Page 12

20 The example below shows how to change the colo and the left magin of a <h1> element: Example <h1 style="colo:blue;magin-left:30px;">this is a heading.</h1> CSS Colos Colos in CSS ae most often specified by: a valid colo name - like "ed" an RGB value - like "gb(255, 0, 0)" a HEX value - like "#ff0000" Colos set by using colo names such as ed, Blue, Maoon, etc. Note: Colo names ae case-insensitive: "Red" is the same as "ed" o "RED". HTML and CSS suppots 140 standad colo names. Visit to see all available colos. Hexadecimal Colos RGB values can also be specified using hexadecimal colo values in the fom: #RRGGBB.whee RR (ed), GG (geen) and BB (blue) ae hexadecimal values between 00 and FF (same as decimal 0-255). Fo example, #FF0000 is displayed as ed, because ed is set to its highest value (FF) and the othes ae set to the lowest value (00). Note: HEX values ae case-insensitive: "#ff0000" is the same as "FF0000". CSS Backgounds The CSS backgound popeties ae used to define the backgound effects fo elements. CSS backgound popeties: backgound-colo backgound-image Web Design Booklet 2017.doc 4/10/2017 Page 13

21 backgound-epeat backgound-attachment backgound-position Backgound Colo The backgound-colo popety specifies the backgound colo of an element. You can use eithe the colo name o the HEX numbe. The backgound colo of a page is set like this: <style> body { backgound-colo: lightblue; </style> Fo Hex: <style> body { backgound-colo: #ff0000; </style> Backgound Image The backgound-image popety specifies an image to use as the backgound of an element. By default, the image is epeated so it coves the entie element. The backgound image fo a page can be set like this: Web Design Booklet 2017.doc 4/10/2017 Page 14

22 Example <style> body { backgound-image: ul("pape.gif"); </style> Note: When using a backgound image, use an image that does not distub the text. Text Colo The colo popety is used to set the colo of the text. The default text colo fo a page is defined in the body selecto. Fo choices of HTML colos to use, visit the following website: Example body { colo: blue; h1 { colo: geen; p { colo: #ff0000; Text Alignment The text-align popety is used to set the hoizontal alignment of a text. A text can be left o ight aligned, centeed, o justified. Web Design Booklet 2017.doc 4/10/2017 Page 15

23 The following example shows cente aligned, and left and ight aligned text (left alignment is default if text diection is left-to-ight, and ight alignment is default if text diection is ight-to-left): Example h1 { text-align: cente; h2 { text-align: left; h3 { text-align: ight; Text Decoation The text-decoation popety is used to set o emove decoations fom text. The value text-decoation: none; is often used to emove undelines fom links: <html> <head> <style> a { text-decoation: none; </style> </head> <body> <p>a link with no undeline: <a hef=" </body> </html> The othe text-decoation values ae used to decoate text: Web Design Booklet 2017.doc 4/10/2017 Page 16

24 h1 { text-decoation: oveline; h2 { text-decoation: line-though; h3 { text-decoation: undeline; Font Family The font family of a text is set with the font-family popety. The font-family popety should hold seveal font names as a "fallback" system. If the bowse does not suppot the fist font, it ties the next font, and so on. Stat with the font you want, and end with a geneic family, to let the bowse pick a simila font in the geneic family, if no othe fonts ae available. Note: If the name of a font family is moe than one wod, it must be in quotation maks, like: "Times New Roman". Moe than one font family is specified in a comma-sepaated list: Example p { font-family: "Times New Roman", Times, seif; Font Style The font-style popety is mostly used to specify italic text. This popety has thee values: nomal - The text is shown nomally italic - The text is shown in italics oblique - The text is "leaning" (oblique is vey simila to italic, but less suppoted) Web Design Booklet 2017.doc 4/10/2017 Page 17

25 Example p.nomal { font-style: nomal; p.italic { font-style: italic; p.oblique { font-style: oblique; Font Size The font-size popety sets the size of the text. Being able to manage the text size is impotant in web design. Howeve, you should not use font size adjustments to make paagaphs look like headings, o headings look like paagaphs. Always use the pope HTML tags, like <h1> - <h6> fo headings and <p> fo paagaphs. The font-size value can be an absolute, o elative size. Absolute size: Sets the text to a specified size Does not allow a use to change the text size in all bowses (bad fo accessibility easons) Absolute size is useful when the physical size of the output is known Relative size: Sets the size elative to suounding elements Allows a use to change the text size in bowses Note: If you do not specify a font size, the default size fo nomal text, like paagaphs, is 16px (16px=1em). Web Design Booklet 2017.doc 4/10/2017 Page 18

26 Set Font Size With Pixels Setting the text size with pixels gives you full contol ove the text size: Example h1 { font-size: 40px; h2 { font-size: 30px; p { font-size: 14px; Font Weight The font-weight popety specifies the weight of a font: Example p.nomal { font-weight: nomal; p.thick { font-weight: bold; CSS Links With CSS, links can be styled in diffeent ways. <html> <head> <style> Web Design Booklet 2017.doc 4/10/2017 Page 19

27 a { colo: hotpink; </style> </head> <body> <p><b><a hef="default.asp" taget="_blank">this is a link</a></b></p> </body> </html> Styling Links Links can be styled with any CSS popety (e.g. colo, font-family, backgound, etc.). Example a { colo: hotpink; In addition, links can be styled diffeently depending on what state they ae in. The fou links states ae: a:link - a nomal, unvisited link a:visited - a link the use has visited a:hove - a link when the use mouses ove it a:active - a link the moment it is clicked Example /* unvisited link */ a:link { colo: ed; /* visited link */ Web Design Booklet 2017.doc 4/10/2017 Page 20

28 a:visited { colo: geen; /* mouse ove link */ a:hove { colo: hotpink; /* selected link */ a:active { colo: blue; When setting the style fo seveal link states, thee ae some ode ules: a:hove MUST come afte a:link and a:visited a:active MUST come afte a:hove When someone clicks a hypetext, it takes them to anothe web page. Let s say you wanted to make a link on you web page that goes to Yahoo! (The URL of Yahoo! is: To do this you would type: <a hef= >Click Hee fo Yahoo</a> The esult would be: Click Hee fo Yahoo When you click the link you will go to the Yahoo web page. CSS Lists HTML Lists and CSS List Popeties In HTML, thee ae two main types of lists: unodeed lists (<ul>) - the list items ae maked with bullets odeed lists (<ol>) - the list items ae maked with numbes o lettes Web Design Booklet 2017.doc 4/10/2017 Page 21

29 The CSS list popeties allow you to: Set diffeent list item makes fo odeed lists Set diffeent list item makes fo unodeed lists Set an image as the list item make Add backgound colos to lists and list items Diffeent List Item Makes The list-style-type popety specifies the type of list item make. The following example shows some of the available list item makes: Example ul.a { list-style-type: cicle; ul.b { list-style-type: squae; ol.c { list-style-type: uppe-oman; ol.d { list-style-type: lowe-alpha; All the diffeent list-item makes fo lists: Unodeed list - o cicle o disc o squae Odeed list - o decimal o lowe-alpha Web Design Booklet 2017.doc 4/10/2017 Page 22

30 o o o o lowe-oman uppe-alpha uppe-oman none Adding Pictues to You Webpage On almost evey web page on the intenet thee is some kind of pictue o gaphic. You should have at least one pictue on you page. To display a pictue you like on you web page, follow these steps fo eithe HTML o CSS: 1. Find a pictue that would be appopiate fo you web page. Make sue that you have clicked on the image and that it s the only object in you window. 2. Copy the website addess in you addess ba. (Click on the Edit menu and select Copy.) 3. Paste you website addess into you TextEdit file. (Click on the Edit menu and select Paste.) 4. Add the tag infomation befoe and afte you website addess, as shown in the example below. 5. Change numbes of the width and height to wok best fo you image. 6. Optional: You may want to cente you pictue. (Hint: Look at the Alignment section of this booklet.) HTML code - 4 attibutes (additional infomation) to use with <img> tag: sc tells bowse which image fom intenet to use; the ul o addess of the image is always suounded by quotes alt if pictue fails to load, this will tell use what pictue should be width use to esize image s width > (Note: use only width o only height) height use to esize image s height <img sc= alt= Hay Potte book cove width= 200 height= 300 > Web Design Booklet 2017.doc 4/10/2017 Page 23

31 CSS code - <html> <head> <style> #home { width: 250px; height: 350px; backgound: ul( LittleHouseOnThePaiie.jpg/225px-1933-LittleHouseOnThePaiie.jpg) 0 0; </style> </head> <body> <img id="home" sc="img_tans.gif" alt= Little House on the Paiie book ><b><b> </body> </html> *Optional: Using a Pictue as You Hypelink Instead of clicking on the wods of a hypelink you can have you website visitos click on a pictue to take them to anothe website. To do this: <a hef= ><img sc= pictue.gif width= 65 height= 38 ></a> Note: Make sue you include some text BEFORE you link so that visitos know that they should click on the pictue to go to a site! Web Design Booklet 2017.doc 4/10/2017 Page 24