Web Design with HTML (and Dreamweaver)

Web Design with HTML(and Dreamweaver) Hyper Text Markup Language

Basics • Most code in HTML works on the premise of opening and closing TAGS • They work in pairs • One in front of the text you want the code to affect • One at the end of the text you want to affect • Tags are denoted with the less than and greater than symbols < > • Closing tags include a slash </ >

Anatomy of a Web page Automatically added with Dreamweaver. Used by search engines All pages start with the <html> tag and end with the </html> tag

Anatomy of a Web page Insert the text to appear in the browser’s TITLE BAR between these two tags The header is information that does NOT appear on the web page. Used for extra code and keywords for search Engines

Anatomy of a Web page Insert your web page CONTENT between these two tags

Anatomy of a Web page CAUTION: Codes cannot intersect each other

Formatting Tags • Bold: or • Italics: or emphasis • Underline: • stands for break, hard return  • <hr> horizontal rule line • <h1> , <h2>, <h3>….. Headings in sizes up to 7 • means paragraph •

Font Tag Properties • • Can contain many sub-tags called Attributes • Color=“hexadecimal code” • Face=“Font style” • Size=“#1-7” Example: Text Affected

Page Tag Properties • These are Attributes of the Body tag • <body …..> </body> • bgcolor=“hexadecimal code” – for background • Link=“hexadecimal code” – for link colour • Vlink =“hexadecimal code” – visited link colour Example: <body bgcolor=“red” link=“blue” vlink=“purple”> PAGE CONTENT HERE</body>

Naming Conventions • First page always  Index.html • All Names for images/pages/documents/files/folders • NO SPACES • No special characters eg #, &, ', !, ?, +, - • Only underscore eg. team_hogarth • Descriptive but short • All work together in ONE folder • Organize by using subfolders

HTML Exercise 1 • Create a web page to sell one particular book or CD with the following elements: • TITLE with the name of the book or CD at the top of the web page • Paragraph of general information about the book or CD and a separate paragraph about the author or musical artist. Bold the keywords wherever they appear in the text. Italicize the name of your online store at the bottom. • Put the two paragraphs of text in different fonts. Make the title of the book or CD red. Make the author's name or artist name green. • Create a folder named “HTML_Exercises” and save the document as exer1.html • remember NO SPACES in the file and folder names.

Lists • Two types of lists: • Ordered (1, 2, 3…) • Unordered (, …..) • Each list item is enclosed by <li> </li> • The entire list is the enclosed by: • <ol> </ol> for ordered list • <ul> </ul> for unordered list

Images • Can insert pictures with file extensions • .jpg, .jpeg, .gif, .png • <img …. > NO closing tag, attributes include • Src=“filename and extension” • No path is needed if picture file is stored in the same folder as page document • Height=“pixels” or Width=“pixels

HTML Exercise 2 • Open your exer1.htm, book or CD web page. • Add an ordered list of chapters in the book or songs on the CD. Note: If your book does not have chapter titles you can create your own titles. If the book has too many chapters divide the book into 4 or 5 sections and include section titles. • Add an unordered list of at least four selling points for the book or CD. Note: A selling point is a reason a salesperson would give to the customer in an effort to sell the product. Write selling points that would convince a visitor to your web site to buy this item. • Both lists should start with titles and include a headings tag. Use different fonts for the two lists. • Add a relevant Image related to the Book/Cd and/or Author.

External Links • Link to another website or webpage • <a …..> </a> for Anchor • Encloses the text or image you want user to click • Href=“website address” • Be sure to include http:// • Target="_blank" –opens in a new browser • Don't want people to leave your site <a href="http://www.peel.org" target="_blank">Website</a>

Internal Links • Link to another page in your files or a document for downloading • <a …..> </a> for Anchor • Encloses the text or image you want user to click • Href=“file name and extension” • Include path/folders if document is in another folder • Do Not include http:// Example: <a href="page2.html">Next Page</a>

Email Links • Link to an email address that opens the user’s email program on their computer • <a …..> </a> for Anchor • Encloses the text or image you want user to click • Href=“MAILTO:email address” Example: <a href="MAILTO:me@yahoo.com">Email</a>

Anchor • Takes you to another location on the same page • Needs two tags: • One to set the anchor, where the link goes to • <a name="top"> </a> • One to set the link that the user clicks on • <a href="#top">Go to Top</a> • # needed to refer to an anchor name

Frames

Flash Text & Buttons

HTML Exercise 3 • Open your exer1.htm web page. • Add at least 2 External links to the bottom of the page that provide the visitor with more information about this product if they wish to learn more. Possible links would be to; reviews of the book or CD or the artist's or author's web site. • Add a new page (a main/home page to your business website that is selling the book or CD) and name it Index.html • Create a company name and logo (that is selling the book/cd) • Add an email link on your home page so that people can contact you. • Create a navigation system of internal links connecting the two pages of your website

Tables Table: 2 rows 3 columns

Table Rows Table: 2 rows 3 columns Row 1 (top) Row 2 (bottom)

Table Columns Table: 2 rows 3 columns

Forms

HTML Exercise 4 • Open your exer1.htm web page. • Create a table at the bottom and add a list of other books by the same author or other CDs by the same musical artists in one column and the date when they were released or published in a second column. Include column headings in the first row of the table. • Open your Index.html web page. • Add a form that

UNIT SUMMATIVE PROJECT • Create an E-business Website • Sells products, services or charity collecting donations • 4-6 pages containing different but relevant content • Criteria • LISTS: At least 1 ordered list and 1 unordered list • LINKS: Internal links connecting all pages, at least 1 External link, 1 Email and 2 Anchor links • TABLES: at least 1 table with multiple rows and columns with borders and 1 table used for object placement (therefore no borders) • FORMS: at least one form used with minimum of three input objects

Web Design with HTML (and Dreamweaver)