HTML Foundations, part 1

transcript

22-3375 Web Design I // Columbia College Chicago

HTML Foundations, pt 1

Directories

Room 902

Room 902Room 901 Room 903

9th Floor

9th Floor/Room 902/

9th Floor

../Room 902/

Two dots in front of a forward slash means: “step up one directory.” In this example it says:

“step out of room 903 and then back into room 902, talk to “

9th Floor8th Floor 10th Floor ++

WabashCampus

Mich AveCampus

Book & Paper Center

ColumbiaCollege

Universityof IL SAAIC ++

/Columbia College/Wabash Campus/9th Floor/Room 902/

http://Columbia College/Wabash Campus/9th Floor/Room 902/

Relative link to rootA relative link (does not start with “http://”) with a slash at the beginning forces the link to start at the root of the website. This will only work on the server, not when you are working locally.

Absolute linksAbsolute links are typically used for linking to pages or !les outside of your site’s directories.

The index !le

When an absolute link is directed to a folder, the browser needs to know which !le to open. By default, it looks for a !le named “index” (the extension is not important, usually is it index.html, or index.php). This is why the homepage is always named “index”.

So, <a href=”http://www.mysite.com/”> and <a href=”http://www.mysite.com/index.html”> will open the same !le.

root directory (www.mysite.com)

index.html

images

logo.png

report.pdf

stylesheet.css

Tutorial: Relative Linking

Create a webpage with all three of these images placed:

File Transfer Protocol

Local(your computer)

Host(www)

FTP Software

All premium code editors have ftp built in, which allows you to sync your project !les to the server easily.

You will often need to post or download !les from the server manually. For this you can use dedicated ftp software:

Fetch, Transmit and FileZilla & Fireftp (both free) are all good choices for Mac.

Wordpress

A Content Management System (CMS) is a computer program that allows publishing, editing and modifying content on a web site as well as maintenance from a central page.

index.php database

Dynamic CMS

WALKTHROUGH: Set up a theme in Wordpress

WALKTHROUGH: Create a post in Wordpress

Hyper Text+

Markup Language

Hyper Text

Markup Language

A markup language is a set of markup tags.

The purpose of the tags are to describe page content.

Markup Language

Without any markup to give your content structure, the browser renders unformatted and unstyled text, also known as “plain text”.

Markup Language

HTML tags give structure and meaning to your content. “Semantic markup” refers to the use of meaningful tags to describe content (e.g. using header tags for header content).

Markup Language

Once your content is marked up, the browser applies built-in default styles to the tags. While you can override these styles with css, your marked up, non-css styled document should be readable and have a clear hierarchy.

Rich Text to Plain Text

Just as with InDesign, when you receive text from someone that has already been formatted (e.g. from Word), you should always paste that text into TextEdit, and convert to plain text.

In TextEdit, go to ‘Format’ to ‘Make Plain Text.’

Copy and paste the plain text into your HTML and start typing in tags to recreate the document structure.

HTML Elements

Anatomy of an Element

An HTML element includes boththe HTML tag and everything between

the tag (the content).

<tag>Content</tag>

The element tag gives the content structure and meaning.

<tag>Content</tag>

Tags normally come in pairs. The!rst tag is the start tag, and the second

tag is the end tag.

<tag>Content</tag>

HTML has a de!ned set of tag names (also called keywords) that

the browser understands.

<h1>Main Headline</h1>

Most elements can have attributes,which provides additional informatin

about the element.

Attributes always follow the sameformat: name=”value”. You can use

either single or double quotes.

Where did those text styles come from?

All browsers have what is called a“client stylesheet” that applies formatting

to your html elements, such as text size, font,color, margins, line-height, and much more.

Your custom css overrides some of these default styles.

Tags: Basic Structure

doctype

<!DOCTYPE html>

EXCEPTION

The doctype is not actually a tag, but a declaration, telling the browserwhat kind of html you are using. The

doctype above declares HTML 5.

<html></html> STRUCTURE

The <html> element de!nesthe whole HTML document.

<html lang=”en”></html> STRUCTURE

The <html> element should have a “lang” attribute to tell the browser what language

your page is written in.

The <head> contains special elements that instruct the browser where to !nd stylesheets & javascript !les, as well as

provide meta data about your site.

The <body> element contains the document content (what is shown

inside the browser window).

Tutorial: Set up a basic html template

Nesting

The use of our !rst three tags (html, head and body), introduces and important concept: Nesting, which is when tags “wrap” other tags. When you create markup, you should indicate nesting by indenting the nested tags with 2 spaces (preferred) or a tab.

Document Hierarchy: Parents, children and siblings

Just as in a genealogy tree, the family hierarchy is described in terms of relationships. All elements in the document have a parent (up to ‘document’, which is at the top), and may have children (nested inside) or siblings (placed alongside).

</parent x>

Tags: Head Tags

titlebasemetalink

scriptstyle

<title></title> STRUCTURE

The title element:• de!nes a title in the browser toolbar, • provides a title for the page when it is added to favorites• displays a title for the page in search engine results.

<title>My Portfolio</title>

EXAMPLE

<meta> STRUCTURE

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but

will be machine readable.

The <meta> is a single tag —it does not require a closing tag.

EXAMPLE

Tags: Paragraphs

<p></p> STRUCTURE

The <p> element is a block-level tag that contains default space-before and

space-after properties (making indentionunnecessary.)

EXAMPLE

Tags: Headings

<h1></h1> through

The header elements are block-leveltags that give you the ability to assignsemantic weight (importance) to your

headlines.

EXAMPLE

Tags: Lists

List tags are always used in nested pairs.

The wrapping tags de!ne the list type, and indicate where the list series begins

and ends.

STRUCTURE

The <ul> (unordered list) element is a block-level tag that wraps a series of <li> (list item) elements. The default property

for the list items is a bullet.

EXAMPLE

STRUCTURE

The <ol> (ordered list) element is a block-level tag that wraps a series of <li> (list item) elements. The default property

for the list items is decimal (1, 2, 3).

EXAMPLE

Tags: Formatting

(partial list)

blockquotecite

i (or) em

smallb (or) strong

subsupdel

EXAMPLES

Tags: Special Elements

<br> STRUCTURE

The <br> element is a single, inline tag that works anywhere in the body to create a single line break. In a <p>

element, it is the equivalent of asoft return.

EXAMPLE

A horizontal rule is created by using the single tag <hr>. It is a block

level element (so it will clear the elements above and below.

Escape & Special Characters

In HTML, some characters are reserved for the code, like brackets (< >), ampersands (&), and quotes (“ and ‘). Other characters, like em & en dashes, em spaces, curly quotes, copyright symbols, fractions, etc, are not included in the “standard” character sets. In both cases, you work around this by using special codes that will translate into those characters in the browser. Below are the ones you will probably use the most:

“ “” “‘ &’ &

Tags: Images

<img> STRUCTURE

The <img> element is a single, inline tag that works anywhere in the body

to insert a jpg, png, svg or gif !le.

The <img> tag is empty;it requires a src (source) attribute to

“pull in” the image into the page. It does not require an “alt” tag, but if the image

is essential to the content (e.g. not a background or decorative element), it

should have one.

STRUCTURE

All <img> tags should also contain analt attribute. This is “alternate” text

that will appear if for some reason the image link is broken or the !le is unavailable.

EXAMPLE

Tags: Anchors (linking)

<a></a> STRUCTURE

The <a> element is an inline tag that works anywhere in the

body to create a hyperlink.

EXAMPLE

<a href="aboutme.html">About Me</a>

<a> tags are always used in pairs, wrapping the content you want to activate

as a link. If you use an absolute URL, it must start with “http://”.

<a href="http://www.colum.edu">My school</a>

Relative vs Absolute links

Whenever you link to a !le with an ‘href‘ (hypertext reference ) or ‘src’ (source) attribute, you are providing the browser and address to the resource. That address can be relative or absolute.

index.html

images

logo.png

report.pdf

stylesheet.css

A relative link is relative to the resource’s location in its directory. It is like saying “the restaurant is 2 blocks away.”In the example below, if ‘logo.png‘ were linked from the homepage (index.html), the tag would be:

index.html

images

logo.png

report.pdf

stylesheet.css

An absolute link is the full address to the resource’s location in the entire web. It is like saying “the restaurant is at 222 West Grand, Chicago IL 60625.”

index.html

images

logo.png

report.pdf

stylesheet.css

HTML Foundations, part 1

Education