Start here.

http://www.dontfeartheinternet.com

Basic HTML & CSS for non-web designers

Internet basics. Browser - the application that you use to view the internet. Server - large off site computer where websites are stored. Personal/Work Computer - where websites are created, and later uploaded to a server. This is also where you ultimately view your site as well.
You dont ordinarily load your files onto the server until you are finished with the website and ready for it to be viewed by the public. But we can view & check files locally in any browser.

Server, store here Personal/Work Computer, make here

UPLOAD

duffy_web

<<

Browser & PC, view here

<<

<<

<

DO

WN

LO

AD

<<

<<

<<

<<

<<

URLs - Uniform Resource Locator

URLs are the address of a website and can indicate the file path where it is stored. If a domain name is established a web address appears like this
http://www.coolguy.com

Checking & viewing files locally means viewing an HTML file that is located on your computer. You can open this file in a browser, but your files have not yet been uploaded and stored on a server. Think of these as temporary files, they arent yet on the server. Viewing files locally may look like this points to files on your computer
file:///Users/selfone/Desktop/CoolguyWebsite/coolguy.html

As opposed to this points to files on the server

http://www.coolguy.com

File Saving & Conventions

It is important to save files appropriately
1. Name files with meaningful but concise & specific names identify it by the type of file it is, who or what projects its for 2. Nest your files in a way that is straightforward imagine if you had to hand all your files to another person to work on, would your system be intuitive enough to understand?

This makes your files more easily found if you do a search Makes content more immediately recognizable Prevents wasting time guessing where things are or whats what.
Save to the scratch disk in class, backup to your flash drive daily and to Dropbox.com

HTML HyperText Markup Language

Websites are made of HTML files. They hold the content of the website, and act structurally as a skeleton.
Each web page is a separate HTML file, so a website with three pages has three HTML files.

CSS - Cascading Style Sheets

CSS files are used to style the content in the HTML files, by linking them together. Dont worry, well cover this next week.

HOW HTML WORKS: Identify different types of content, and assign each a specific html tag.

http://www.dontfeartheinternet.com

Basic HTML & CSS for non-web designers

HTML appears more basic like this, remember HTML is the content structured, but not yet styled.

DONT FEAR the INTERNET

BASIC HTML & CSS for NON-WEB DESIGNERS
by Jessica Hische & Russ Maschmeyer
Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because youve been waiting two years for your cousin to put it together for you? Well, were here to help. We know that you have little to no desire to do web design professionally, but that doesnt mean that you want an ugly cookie-cutter site or to settle for one that hasnt been updated since Hackers was in theaters. Through short tutorial videos, youll learn how to take a basic wordpress blog and manipulate the css, html (and even some php!) to match your aesthetic. Youll feel empowered rather than crippled by the internet and worst case scenario youll at least end up having a better idea of how professional web designers turn your design dreams into a reality on screen.

ABOUT the AUTHORS LINKS and RESOURCES RSS WALLPAPERS

Identify different types of content.

DONT FEAR the INTERNET

BASIC HTML & CSS for NON-WEB DESIGNERS
by Jessica Hische & Russ Maschmeyer
Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because youve been waiting two years for your cousin to put it together for you? Well, were here to help. We know that you have little to no desire to do web design professionally, but that doesnt mean that you want an ugly cookie-cutter site or to settle for one that hasnt been updated since Hackers was in theaters. Through short tutorial videos, youll learn how to take a basic wordpress blog and manipulate the css, html (and even some php!) to match your aesthetic. Youll feel empowered rather than crippled by the internet and worst case scenario youll at least end up having a better idea of how professional web designers turn your design dreams into a reality on screen.

ABOUT the AUTHORS LINKS and RESOURCES RSS WALLPAPERS

html basics & terms

HTML Has 3 Main Parts 1. An opening tag with an abbreviation inside it 2. The content that the abbreviation describes 3. A closing tag, with the same abbreviation inside <p>words</p> Tags - Identifies the type of contents. They are abbreviated versions of something that resembles english. It must open and close. A closing tag looks exactly like an opening tag except it has a back slash (/)before the tag abbreviation. <p> - opening tag </p> - closing tag

13 MUST KNOW TAGS AND THEIR MEANINGS <p> - Paragraph <header> - This tag surrounds the header for a section or an entire page. Most designers use this to surround their logo and primary navigation, but it can also surround the header of a small section of a page. <footer> - This tag surrounds the footer of a section or an entire page <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - headings or headlines, short chunks of text that summarize what follows them. <h1> is most important, <h6> is least. Ideally each page will have at least 1 <h1> .

<div> - Short for division, it doesnt imply any grammatical context like paragraph or headline, its just a way to group large chunks of related things. Its usually used in fact to group paragraphs and headlines. <a> - Stands for anchor. An anchor in HTML is a link, so an <a> tag is just a link.

<strong> - Use this to surround small bits of text that you think need more attention. Often this is how youd go about making something bold. <em> - Used to surround short bits of text you think deserve more emphasis. Often this is how youd go about making something italic. <span> - Like its big brother the <div> tag, the span tag is for grouping things. Its used to separate smaller groups, mostly just little bits of text. <img> - Short for image, this is how you bring an image in with HTML.

<ul> & <li> - These always come as a pair. <ul> is unordered list and <li> is a list item. This can be referred to as a bulleted list, though bullet points are not necessary. <ol> & <li> - These always come as a pair also. <ol> is ordered list and <li> is a list item. This is referred to as a numbered list.

Identify different types of content to assign each a specific html tag.

DONT FEAR the INTERNET

BASIC HTML & CSS for NON-WEB DESIGNERS
by Jessica Hische & Russ Maschmeyer
Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because youve been waiting two years for your cousin to put it together for you? Well, were here to help. We know that you have little to no desire to do web design professionally, but that doesnt mean that you want an ugly cookie-cutter site or to settle for one that hasnt been updated since Hackers was in theaters. Through short tutorial videos, youll learn how to take a basic wordpress blog and manipulate the css, html (and even some php!) to match your aesthetic. Youll feel empowered rather than crippled by the internet and worst case scenario youll at least end up having a better idea of how professional web designers turn your design dreams into a reality on screen.

ABOUT the AUTHORS LINKS and RESOURCES RSS WALLPAPERS

Identify different types of content to assign each a specific html tag.

<h2>BASIC HTML & CSS for NON-WEB DESIGNERS</h2>
<h3>by Jessica Hische & Russ Maschmeyer</h3>
<p>Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because youve been waiting two years for your cousin to put it together for you? Well, were here to help. We know that you have little to no desire to do web design professionally, but that doesnt mean that you want an ugly cookie-cutter site or to settle for one that hasnt been updated since Hackers was in theaters. Through short tutorial videos, youll learn how to take a basic wordpress blog and manipulate the css, html (and even some php!) to match your aesthetic. Youll feel empowered rather than crippled by the internet and worst case scenario youll at least end up having a better idea of how professional web designers turn your design dreams into a reality on screen.</p>

<h1>DONT FEAR the INTERNET</h1>

<ul> <li>ABOUT the AUTHORS </li> <li>LINKS and RESOURCES </li> <li>RSS </li> <li>WALLPAPERS</li> </ul>

 Open and close tags Tab to create nested hierarchies Be consistent

<h1>DONT FEAR the INTERNET</h1> <h2>BASIC HTML & CSS for NON-WEB DESIGNERS</h2> <h3>by Jessica Hische & Russ Maschmeyer</h3> <p>Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because youve been waiting two years for your cousin to put it together for you? Well, were here to help. We know that you have little to no desire to do web design professionally, but that doesnt mean that you want an ugly cookie-cutter site or to settle for one that hasnt been updated since Hackers was in theaters. Through short tutorial videos, youll learn how to take a basic wordpress blog and manipulate the css, html (and even some php!) to match your aesthetic. Youll feel empowered rather than crippled by the internet and worst case scenario youll at least end up having a better idea of how professional web designers turn your design dreams into a reality on screen.</p> <ul> <li>ABOUT the AUTHORS</li> <li>LINKS and RESOURCES</li> <li>RSS</li> <li>WALLPAPERS</li> </ul>

Code writing, getting started

Some important tags not yet mentioned: <html> An HTML tag must open and close your website every time. This is the first thing you will write. Your entire site is nester in your HTML tag. <head> The head tag element is a container for all the head elements. The head element must include a title for the document, and can include scripts, styles, meta information, and more. This follows your HTML tag, and precedes the body tag. <title> The title tag, nested inside of the head tag identifies the name of the page, its the title on the tab in your browser. <body> The body tag is the guts of your site. Nest all of your content inside of it.

<html> <head> <title>Dont Fear it Dudes</title> </head> </body> <h1>DONT FEAR the INTERNET </h1> <h2>BASIC HTML & CSS for NON-WEB DESIGNERS </h2> <h3>by Jessica Hische & Russ Maschmeyer </h3>

TextWrangler

<p>Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because youve been waiting two years for your cousin to put it together for you? Well, were here to help. We know that you have little to no desire to do web design professionally, but that doesnt mean that you want an ugly cookie-cutter site or to settle for one that hasnt been updated since Hackers was in theaters. Through short tutorial videos, youll learn how to take a basic wordpress blog and manipulate the css, html (and even some php!) to match your aesthetic. Youll feel empowered rather than crippled by the internet and worst case scenario youll at least end up having a better idea of how professional web designers turn your design dreams into a reality on screen. </p> <ul> <li>ABOUT the AUTHORS</li> <li>LINKS and RESOURCES</li> <li>RSS</li> <li>WALLPAPERS</li>

</ul> </body> </html>

Open and close tags Tab to create nested hierarchies Be consistent