Basic Design Powerpoint
Download
Report
Transcript Basic Design Powerpoint
Entertain
Inform
Educate
Blogs
Sell
Date
Gamble
Religion
Content, Easy Navigation, Basic Principles of Design
Website Review
Browser
Notepad ++
FREE: notepad-plus-plus.org
Who is this guy who created html in 1991?
Hyper Text Markup Language
o Set of markup tags
o HTML tags
o Each tag describes difference document content
o Version 5 (2012)
o World Wide Web Consortium
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>
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
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
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
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 server
Look at the terms and features
Transfer your web page, images, scripts, etc. to the website
using FTP.
http://tv.adobe.com/product/muse/
Start Adobe Muse
A photograph. Adobe
Photoshop.
jpg, psd, png, tiff, bmp, and gif
Uses math to draw shapes.
Fonts & logos. Adobe Illustrator.
Eps, ai, pdf