Week 12 | Web 1


W3 SCHOOLS

This is a great resource site, I’m going to be referring to it a lot this class and in the future. If you are ever stuck for how to do something, start here:
http://w3schools.com


MANAGE YOUR SITE: REMOTE VS. LOCAL FILE SYSTEMS

When we build a Web site, we develop them on our local (or “desktop”) machine, and publish them to a remote “Web server”. A Web server is a computer that is essentially the same as your desktop machine, but has server software installed that allows it to take http requests from an internet user’s computer (or “client”), and deliver the requested html document to the user’s browser. This client / server relationship is the basis of all Web activity.

What we call a “site” is really just a collection of html documents that we associate via internal references (links) between them. In order to keep your site organized, and to ensure that it functions exactly the same online as on your desktop, you must keep the file and directory structure exactly the same on the local and remote machines.

The first step in doing this is to organize your local file structure. First, create a “root” folder on your local machine or flash drive from which you are going to work. This folder could be named for the course (interactivemedia) or your username (najlahhicks). It doesn’t matter what the name is at the top level.

For the beginning of this class, I’m going to dictate a file structure that I want you all to use.

Within your root directory, create two directories:

working_files
public_html

From now on, the “working_files” directory will hold documents and images that you use as resource files for building your site, but not any files that will uploaded to the site itself. Put the resume text file that you brought today into this directory.

The public_html directory will contain all files that will actually become part of your site. Put the bio html file that you created as homework in that directory now.

Within the html directory, also create a subdirectory called:
images

We will use this directory later in the course to store any images that will appear in your web site.


UPLOADING YOUR FILES USING FTP/SFTP

Your html files are uploaded to the Web server using FTP, or File Transfer Protocol. You will need an FTP client to do this. If you are using the A server, you will need a program that supports SFTP, or Secure File Transfer Protocol. Here are likes to some popular programs:

Fugu (MAC) – This program is free.
Fetch (MAC)
CyberDuck (MAC) – This program is free.
FileZilla (PC) – This program is free.

All these programs function essentially the same. To connect to your remote server, you enter the address of the FTP server, your username and password.

***NOTE: You can upload files through the Bluehost file manager.


Intro to HTML

HTML is the language of Web browsers. HTML stands for HyperText Markup Language. HTML is a simple scripting language originally designed to allow nonlinear navigation of large text documents. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the W3Schools, the organization charged with designing and maintaining the language.

HyperText is the method by which you move around on the web. Clicking on specially coded text called hyperlinks navigates you to other pages. The term hyper indicates that the hierarchy of the pages is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in. Markup refers to HTML “does”.

HTML Syntax

All HTML syntax is composed of discreet pieces of code called elementsElements are made up of paired opening and closing tags.


 FILE NAMING CONVENTIONS AND INDEX.HTML

There are a few rules that govern the naming of web files and directories:

All Web page files must end with .html or .htm. These extensions are interchangeable, but generally we use .html

Names are case sensitive. This means that Bio.html and bio.html will be considered by the server as two different files.

Spaces and non-alphanumeric characters are not allowed, with the exception of underscore (_) and hyphen (-)

The “home” page of a Web site is always called index.html or index.htm. If this file does not exist, you will either get an error or see a directory listing of the root directory, depending on how the Web server is configured.

My suggestion to all of you is that you come up with a naming convention for yourself now, and stick to it. This will avoid a lot of problems later on! For example, my naming convention is to use all lowercase letters, and to use underscores instead of spaces:

my_name.html

HTML Syntax

All HTML syntax is composed of discreet pieces of code called elementsElements are made up of paired opening and closing tags.

Tags

Each tag has a specific meaning that communicates to the browse what it should do with the content between the opening and closing tag. For example, the <b></b> tag tells the browser to make bold all text contained between its opening and closing tags.

Tags are the cornerstone of HTML. Tags are instructions to the Web browser that dictate the display of text, images and other elements on the page and are not visible when the page is displayed to the user. You can recognize an HTML tag because it appears in between greater than and less than signs:
<tagname>

There is a large set of pre-designated tags within HTML. Today we are going to cover the basic tags needed for building a basic HTML page and formatting text.

There are two types of tags, container tags and non-container tags.

Container tags appear in pairs, as an opening tag and as a closing tag, like so:
<tagname> </tagname>

Everything contained between the opening <> and closing </> tags is subject to the tag properties.

Non-container tags appear singly, and are what is called “self-closing.” This means that they do not appear in sets, but only as a single tag. In this case, the page content affect by the tag is all contained within the single tag, like so:
<tagname tagcontent />

Note: Previous versions of HTML did not require the closing “/” character at the end of the non-container tag, and it will generally function correctly in most browsers without it, but for the specification we will be using as the standard for this class, you will need to include this.

Attributes

In the language of HTML, attributes serve to modify tags, much like an adjective modifies a noun. As the name implies, attributes are properties of the tag. Each tag has properties that can be changed via the use of the attributes that are associated with it. Attributes follow the tag name within a tags opening component, in between the greater than and less than signs, like so:
<tagname attributename=”value”>

The order of attributes is not important. You can place as many attributes inside a tag as is needed:
<tag attribute1=”value1″ attribute2=”value2″ attribute=”value3″>


Page Structure

In order for a Web browser to recognize a file as an HTML document, it must contain the proper structure. At the minimum, it must contain five basic tags. These tags must appear in the correct order. The page structure tags are as follows:

DOCTYPE tells the Web browser which HTML or XHTML standard your document is written to. For this class, you should use XHTML5 transitional. This is the first thing that should appear in any HTML document that you write.

<!DOCTYPE html>

Always use the code exactly as it appears above.

The <html> tag comes next. It encloses all other tags and content on the page, and further serves to instruct the browser that what is being rendered on the rest of the page. You should use this format for the html tag:

Third is the <head> tag which contains information that is not displayed in the browser window. For instance, a head tag may include information that search engines may use to find the page.

The <title> tag contains the text that appears in the title bar of the browser window. It is nested within the head tag.

The <body> tag contains all of the information to be displayed by the browser.

Using these tags, you can build a basic page structure:

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>

Anything inside the body tags will appear on your Web page.

</body>

</html>

Use this template as the basis for all of your HTML pages!


CODE ACADEMY LESSON I

INTRODUCTION TO HTML

HTML Basics | Fundamentals of HTML


DOCUMENTS MUST HAVE LOGICAL STRUCTURE

All XHTML elements must be nested within the <html> root element. It is the element from which grows the document tree. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. Within the html element there are two necessary “child” elements: the head element and the body element.

Logical Markup Example (Using semantic markup to describe content.)

<!DOCTYPE>
<html>
<head>

<title>Working with Structure</title>

</head>

<body>

<h1>Welcome</h1>

<p>Welcome to the site where structure matters!</p>

<h2>Getting Into Structure</h2>

<p>In order to begin working with structure, you need to be aware

of:</p>

<ul>

<li>DOCTYPE declarations</li>

<li>Properly structured head and body components</li>
<li>Logical structures for content markup</li>

</ul>

</body>
</html>

VIEWING THE DOCUMENT TREE

When you have a more semantic document, you can easily visualize it via the document tree, which is a map that reflects where elements go within the structural hierarchy of the document. This tree becomes critically important when using CSS because of the concept of inheritance.

Document root: html

  • head & body are children to the root
  • title is child to the parent head
  • h1 , h2pul all children of body
  • Each li is a child to ul

 ELEMENTS MUST BE PROPERLY NESTED

In HTML some elements can be improperly nested within each other like this:

<strong><em>This text is bold and italic</strong></em>

In XHTML all elements must be properly nested within each other like this:

<strong><em>This text is bold and italic</em></strong>

TAG NAMES MUST BE IN LOWER CASE

This is because XHTML documents are XML applications. XML is case-sensitive. Tags like <p> and <P> are interpreted as different tags.

This is wrong:

<BODY>
<P>This is a paragraph</P>

</BODY>

This is correct:

<body>
<p>This is a paragraph</p>
</body>


ALL XHTML ELEMENTS MUST BE CLOSED
Non-empty elements must have an end tag.

This is wrong:

<p>This is a paragraph

This is correct:

<p>This is a paragraph</p>

Empty Elements Must Also Be Closed

Empty elements must either have an end tag or the start tag must end with />.

This is wrong:

This is a break<br>

This is correct:
This is a break<br />

IMPORTANT Compatibility Note:

To make your XHTML compatible with today’s browsers, you should add an extra
space before the “/” symbol like this: <br />.


THE <!DOCTYPE> IS MANDATORY
An XHTML document consists of three main parts:

  • the DOCTYPE
  • the Head
  • the Body

BASIC TAGS CONTINUED

Last week we introduced the basic page tags and the <p> tags. Today we are going to learn the rest of the most commonly used tags.

There are two types of HTML formatting tags: inline and block level tags. These two types have slightly different behaviors.


Inline tags

These tags are designed to enclose content that is part of another element. Generally they are used when you want to affect just part of the text in a paragraph. There are just two inline tags we are going to talk about today.

Bold text:

<strong></strong> or <b></b>

Italic text:

<em></em> or <i></i>

Line breaks:

This is a self-closing (non-container) tag. This will create a single line break wherever it is placed in the code:

<br />

Block level tags

These tags are used to control blocks of content. The main characteristic that differentiates block from inline is that block level elements appear by default with a line break before and after them. Here are the most common block level tags you will work with:

The six heading levels:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<Hh3>HEADING 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>
<h6>Heading 6</h6>

Again, the paragraph tag:

<p></p>


LISTS

There are several tags that you can use to create a “list” of items which is a very important way of organizing content. When used in combination with CSS,  lists are a great way to create navigation menus. The tags below are a little different than the tags above in that you must use two distinct tags to create the list, one that contains the entire list, and one that contains each item in the list. Let’s look at

There are three types of lists: unordered, ordered, and definition.


Unordered List

This tag, enclosing all list content, creates a bulleted list.

The code:

<ul>

<li>apples</li>

<li> oranges</li>

<li>pears</li>

</ul>

This is how the list would look:

Screen Shot 2013-01-30 at 1.45.06 PM

This is a LIST with an a href which makes your list a LINK.

Unordered List

List Item

NOTE: Inside the <ul> or <ol> tages, you use a set of tags, enclosing each line, or “list item” item:

<li></li>


Unordered List

This is how it would look on the web.

This is how it would look written in Text Wrangler.

This is the code you would use:

<p>This is an example of an unordered list.</p>

<ul>
<li>Unordered information</li>
<li>Ordered information</li>
<li>Definition lists</li>
</ul>


Ordered List

This tag, enclosing all list content, creates a numbered list:

<ol></ol>

To make an ordered list, like this:

  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday

Use this code:

<ol>
 <li>Monday</li>
 <li>Tuesday</li>
 <li>Wednesday</li>

 <li>Thursday</li>
 <li>Friday</li>
</ol>

Definition List

This tag involves a main phrase, and then a definition for that phrase that appears indented and appearing on a separate line.

The
<dl></<dl>
tag defines the definition list.
The
<dt></dt>
tag is used for the main phrase in the list.
The
<dd></dd>
tag is for the definition itself.
This is how it would show up on the web.
This is how it would look written in Text Wrangler.

Use this code:

<dl>
<dt>This names an item</dt>
<dd>This defines the item names</dd>

<dt>This names another item</dt>
<dd>This defines the other item named</dd>
</dl>

To create an unordered list, like this:Use this code:

<ul>

<li>Unordered information</li>
<li>Ordered information</li>
<li>Definition lists</li>
</ul>

Common Link Types

Link to launch a new window <a href=”newpage.html” target=”_blank”> Link to launch email application<a href=”mailto:myname@email.com”>

<a href=”mailto:myname@email.com”>email me now</a>

OR

<a href="mailto:someone@example.com?Subject=Hello%20again">
Send Mail</a>

When someone clicks on the the “Send Mail”, the email field will pop up.

Anchor Links to a specific place on the same page

<a name=”top”></a>

= an anchor must be indicated in a single, specific spot on the page
<a href=”#top “>Return to Top</a> = a link with “#” before the name that was applied to the anchor link specified in another part of the page.

All the basic tags in one document


NESTED ELEMENTS RULES

Important Note! With the exception of div, you cannot nest one block-level element inside of another. For example, this is wrong:

<p><h1>You can't put a heading inside a paragraph!</p>

But this is ok:

<div><p>You CAN put a paragraph inside a div!</p>

You can nest inline elements inside each other:

<strong><em>I can make this text bold and italic!</em></strong>

And you can nest inline elements inside block-level elements:

<p><em>I can make this paragraph italic!</em></p>

But you can never nest a block-level element inside an inline element:

<em><p>This is wrong!</p></em>

AND you can never nest a block-level element inside a list element:

<li><p>This is wrong!</p></li>

SPECIAL CHARACTERS AND NON-BREAKING SPACES

Text characters that are outside the normal ASCII character set must be represented in html via special character codes. This includes things like em dashes, curly quotes, ampersands, etc. These special character codes always begin with an ampersand (&) and end with a semi-colon(;). For example, an em dash (—), would be represented in your code like this:

&mdash;

or

One especially useful special character is the non-breaking space:

 &nbsp;

Put this character in your code when you want to have more than one white space in a row. However, do not use it to create indented or tabbed formatting, we’ll learn how to do that later!

For a full list of character codes, visit W3School’s Special Characters Reference.


LINKING FILES

File linking is done through the use of the <a> or anchor tag.

Use the following syntax for linking to another document:

<a href="URL_of_target_document">link_text</a>

For example, if you were to link to Google, you would use the following code:

<a href="http://www.google.com/">Google</a>

To link to an email address, which will spawn the user’s designated email client, you simply need to add the “mailto” parameter:

<a href="mailto:emailaddress@server.com">email_text</a>

You may also link to “anchors” in the same file.

To do this, you must create both the link:

<a href="filename.html#anchor_name">anchor_text</a>

and the anchor to link to:

<a name="anchor_name">anchor_text</a>

Absolute vs. relative linksWhen citing the URL of the target document, you may use an “absolute” or “relative” path.

An “absolute” path is the full web address of the document, with protocol. This path will not change depending on the document that is linking to it. This type of link is primarily used when you are linking to an address that is external to the site you are linking from.

For example, the absolute path of this site is:

http://www.do1thing.org

A “relative” path is one where the information is given relative to the document on which the link appears. This type of linking will only work within a given site directory, it can not be used for external URLs.

With relative links, you must be aware of where the document is located in the file directory in relation to the file being linked to.

In the same directory:

filename.html

In a lower (sub) directory:

subdir_name/filename.html

In a higher (parent) directory:

../filename.html

Relative to the site root:

/filename.html

(note: it is unusual to use paths relative to the site root)


LINK TARGETS

Unless instructed otherwise, a Web browser will open a target document in the same window as the linking document. The user of the “target” attribute allows you to direct the target document to an alternate window. Some of the attributes below only apply to framesets, which we will cover briefly later in the course.


TARGET ATTRIBUTE VALUES

_blank Opens the linked document in a new window
_self Opens the linked document in the same frame as the link
_parent Opens the linked document in the parent frameset
_top Opens the linked document in the main browser window, replacing all frames

name Opens the linked document in the window with the specified name


 Common Link Types

Link to launch a New Window
<a href=”newpage.html” target=”_blank”>
Link to launch email application
<a href=”mailto:myname@email.com”>
Anchor Links to a specific place on the same page
<a name=”top”></a>= an anchor must be indicated in a single, specific spot on the page
<a href=”#top “>Return to Top</a> = a link with “#” before the name that was applied to theanchor link specified in another part of the page


CODE ACADEMY LESSON II

Complete HTML Structure: Using Lists in Code Academy
This unit covers more advanced HTML structure and teaches you how to customize your pages.
HTML Basics II: 16 exercises


COMMENTING YOUR CODE

You can place a comment tag in your HTML to put a note into the code that will not be rendered by the browser. This is especially handy in a long and complex page. A comment is formatted as follows:

<!-- This is a comment -->

Everything between the <!– and –> tags will be hidden from the browser, but visible when you view the source.


COLOR

All color in Web pages, whether it is in text, background color, or other interface elements, is expressed in the HTML via hexidecimal codes. These codes consist of a # followed by 6 letters and numbers. For example, the code for white is #FFFFFF.

Below are two excellent references for the hex codes for the Web-safe palette.The Web-safe palette is a collection of colors that have been determined to be consistently rendered across boundaries.

Webmonkey Color Code Chart
Visibone Webmaster’s Palette


FONTS

Because a Web browser can only utilize those fonts installed on the end-user’s machine, there are a limited number of fonts reliably available across platforms. Here’s an up-to-date list of them:

Web Safe Fonts for Mac & PC

You should only use these fonts, or generic font designations, in your style sheets.

Here is a great resource for viewing how Web fonts will look in a browswer:

Typetester


META DATA

Meta data is located within the <head> of a web page. Your meta data is basically information that you insert that explains what this page/site is all about. Copy and past the code text below into your head:

  1. Keywords:
    Information inside a meta element describes the document’s keywords.
    The Code Looks Like this:
    <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
  2. Description:
    Information inside a meta element describes the document.
    The Code Looks Like this:
    <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"/>

Creating your own HTML pages with Text Editors

To make your own Web pages, start with the code above. HTML pages can be created in any Plain Text Editing application. DO NOT use Microsoft Word, as it will add extra formatting that will break your code. Here are links to several text editors that you can download and use to create your pages:


Homework | Week 12

CODE ACADEMY

COMPLETE THESE | INTRODUCTION TO HTML

HTML Basics

Fundamentals of HTML

Build Your Own Webpage

Now that you know HTML, you can create your very own webpage. Let’s get started!

HTML STRUCTURE: USING LISTS

HTML Basics II

Now that you know how to build a webpage, let’s learn how to make it look a little nicer. You can add lists, change fonts, and more!

Social Networking Profile

It’s hard to believe, but you now know enough HTML to create your own basic social networking profile! Let’s get started.

To review what we learned, go to Code Academy and create an account. Complete the following exercises:

Introduction to HTML
This unit will introduce you to the basics of HTML, the language used to create websites.
HTML Basics: 13 exercises

HTML Structure: Using Lists
This unit covers more advanced HTML structure and teaches you how to customize your pages.
HTML Basics II – 16 exercises

BE SURE to take a screen shot of each tag at the end of the lesson and add that to your homework page. 


Create a NEW folder on your desktop called:   webdesign

inside that folder use Text Wrangler to create a page and save it as index.html Upload that folder to the public_html folder on your website. Create a list and add an A HREF link to three more pages, artist.html, bio, html and resume.html.  Create hyperlinks to your artist, bio, resume pages on this page.


BIO.HTML (ALL IN LOWER CASE)
Using the basic page template that you saved in class today, create an HTML page that contains a short bio of yourself. Save the file with the following name: bio.html – Use all of the new tags we learned today to format your resume.


RESUME.HTML (ALL IN LOWER CASE)
Using the basic page template that you saved in class today, create an HTML page that contains a resume of yourself.

Save the file with the following name: resume.html –  Use all of the new tags we learned today to format your resume.

ADD

  • Page anchor links within the longest page to take the user back up to the top of the page
  • External links to at least two (2) web pages that you will use as online reference related to the topics you wrote about on your pages
  • An email link to your contact email address
  • Add at least two LISTS to your resume.

(WE WILL UPLOAD IT TO YOU WEBSITE DURING NEXT WEEK’S CLASS) it on YOUR site. Here is an example of a resume.


ARTIST.HTML (ALL IN LOWER CASE)

  1. Create an artist statement and resume for yourself as a HTML – save the file as  artist.html.
  • Add at least five tags to that page
  • (WE WILL UPLOAD IT TO YOU WEBSITE DURING NEXT WEEK’S CLASS) it on YOUR site. Here is an example of an artist statement.

HOMEWORK.HTML

  1. Create a page – save the file as  homework.html –(WE WILL UPLOAD IT TO YOU WEBSITE DURING NEXT WEEK’S CLASS) .

LIST

Create a LIST at the top of each page (just inside the body tag) with the names:

index.html
resume.html
artist.html

  • Add an a href link to your resume.html page creating a link to an external website. Add the code for target = blank.
  • Add the code for the email link to your resume.html page.
  • Add the space character to anywhere on your resume.html page.
  • Add the comment code: <!– This is a comment –> somewhere on your page and make a comment.
  • Add both lines  of METADATA code into your head.
  • Create a new page called: homework.html and upload it to your server. Add hyperlinks on that page that will take me to your index.html, artist.html, homework.html and contact.html pages.
  • Create a new html page called “contact.html”. Create hyperlinks to your homework, resume and artist pages on this page.
  • Add links between each of the pages.
  • You can do this by create a LIST and adding that list to each of your pages. Below is an example:
  • <ul>    <li><a href=”http://www.katmakes.com”>Home</a></li>    <li><a href=”http://www.katmakes.com/resume.html”>Resume</a></li>    <li><a href=”http://www.katmakes.com/artist.html”>Artist</a></li>    <li><a href=”http://www.katmakes.com/contact.html”>Contact</a></li>    <li><a href=”http://www.katmakes.com/hw.html”>Homework</a></li>     </ul>

1. DELICIOUS

Tag THREE websites on del.icio.us that are relevant to web design and specifically to what you learned in class today. It can be a tutorial, an article, a design blog or anything else that you think would be useful as a reference. Write a note in the comment section about why you think each one is a useful resource.

REFERENCE: The following three (3) reference articles are great resources…

Webmonkey – HTML Cheatsheet http://www.webmonkey.com/webmonkey/reference/html_cheatsheet/

Webmonkey – Stylesheets Guide http://www.webmonkey.com/webmonkey/reference/stylesheet_guide/

Brett Merkey – Most Useful CSS Properties with Examples http://home.tampabay.rr.com/bmerkey/cheatsheet.htm

18 thoughts on “Week 12 | Web 1”

Comments are closed.