entertain inform educate blogs sell date gamble religion
TRANSCRIPT
WEB DESIGN: CHAPTER 8
What does a website do?
Entertain Inform Educate Blogs Sell Date Gamble Religion
What makes a good web site?
Content, Easy Navigation, Basic Principles of Design
Website Review
What do you need? Browser Notepad ++
FREE: notepad-plus-plus.org
MARK-UP LANGUAGE
Hyper Text Markup Languageo Set of markup tagso HTML tags o Each tag describes difference document contento Version 5 (2012)o World Wide Web Consortium
Who is this guy who created html in 1991?
TERMS Tags
<title> (Tag name surrounded by angle brackets) o Nested tags (include other tags inside of it)
• <html> • <body>
Element <title>Example of document </title> start & ending tags
Attribute (Additional info to element) <h1 id=“main”> Main Section </h1>
Organization Create a folder called mysite on your desktop Find a picture of your favorite restaurant, save as
food.jpg. Put the food.jpg in this file folder
HTML EXAMPLES (See Handout)
REFER TO WEB 407-420 IN YOUR BOOK <!DOCTYPE html>
The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. This is saying I am HTML5 Browser.
<html lang="en"> html is always the starting tag – lang says this page will be in english
<head> First part of the webpage is the head included in this area is title, styles, meta and scripts.
<meta charset="UTF-8"> A character encoding tells the computer how to interpret raw zeroes and ones into real characters. It usually does this by pairing numbers with characters. Don’t stress figuring this out. Just always put it in your document.
<title> My First Web Site </title> (this is a nested tag because it is inside another tag – what tag?) This tag is required. It defines the title of the document, provides a title when added to favorites and displays a title of the page in search engine results.
</head> Must have a closing tags for most elements.
<body> Second part of a webpage this is what your page will look like.
<h1> Nikki. </h1> H1 is the largest font that html will make.. Goes from h1 (largest) to h6 (smallest). <h6> This is small text </h6>
<p> The following are my favorite foods. </p> Paragraph is an area to write a paragraph or a sentence. This is a default size of text.
<ul> <li> Pasta </li> <li> Bread </li> <li> Cake </li> </ul>
This is an unordered list it will put this list in bullet form. <p> This is my favorite restaurant. </p> <img src="food.jpg” alt=”Bella Milano’s” height=”200” width=”300” >
This tag is called img the attribute is src that stands for source. Note this is a special tag that does not have a closing tag. You can have more than one attribute as shown here. Alt, Height & Width are also attributes. The
Example continued alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an
error in the src attribute, or if the user uses a screen reader). <br> Break will insert a single line break – again note no closing tag. <p> Three things I want for Christmas </p> <ol>
<li> Vacation </li> <li> Shoes </li> <li> Time off </li> </ol> This is an ordered list. It will put the items in list that will say 1., 2., 3.
<p> This is my favorite website </p> <a href=”http://www.trendhunter.com”>Trend Hunter </a> A is the tag and href is the attribute. http://www defines an absolute path. For links it is best to use the absolute paths. </body>
Closing tags </html>
Closing tags Save this as index.html. Google and web servers will read this as your first page.
Run in google chrome. Let’s add some color and font…. HTML5 has a few items we can use. CSS is used in most web design.
add <b> and </b> to any word <li> <b> Pasta </b> </li>
Add <em> and </em> to any word Add style to your html page: Style is referring to CSS (Cascading Style Sheets) this is a separate language that works with html. All
designers use CSS. <h1 style="color:blue"> Nikki </h1><h1 style="color:blue; text-align:center"> Nikki </h1>You can add more than one style to your tags
Steps to Publishing Your Web Site
Domain Name (url): Go to a site and see if your domain name is available - http://www.godaddy.com/Check your firstlastname
Find a site to host your website (godaddy does this too) – this is the serverLook at the terms and features
Transfer your web page, images, scripts, etc. to the website using FTP.
Adobe Muse http://tv.adobe.com/product/muse/ Start Adobe Muse
RASTER VS. VECTOR GRAPHICS
A photograph. Adobe Photoshop.
jpg, psd, png, tiff, bmp, and gif
Uses math to draw shapes. Fonts & logos. Adobe
Illustrator. Eps, ai, pdf