HTML Foundations, part 1

22-3375 Web Design I // Columbia College Chicago
HTML Foundations, pt 1

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 ++
Wabash
Campus
Mich Ave
Campus
Book & Paper
Center
++
Columbia
College
University
of IL
SAAIC ++

/Columbia College/Wabash Campus/9th Floor/Room 902/
http://Columbia College/Wabash Campus/9th Floor/Room 902/
Relative link to root
A 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 links
Absolute links are typically used for linking to pages or files
outside of your site’s directories.

The index file
When an absolute link is directed to a folder, the browser
needs to know which file to open. By default, it looks for a file
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 file.
root directory (www.mysite.com)
index.html
images
logo.png

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 files to the server easily.
You will often need to post or download files 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.

CMS
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

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.

Anatomy of an Element
An HTML element includes both
the 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
first tag is the start tag, and the second
tag is the end tag.
<tag>Content</tag>

HTML has a defined 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.
<html lang=”en”></html>

Attributes always follow the same
format: name=”value”. You can use
either single or double quotes.
<div class=”left-nav”></div>

Where did those text styles come from?

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.

<!DOCTYPE html>
EXCEPTION
The doctype is not actually a tag,
but a declaration, telling the browser
what kind of html you are using. The
doctype above declares HTML 5.

<html></html>
The <html> element defines
the whole HTML document.

<html lang=”en”></html>
The <html> element should have a “lang”
attribute to tell the browser what language
your page is written in.

<head></head>
The <head> contains special elements
that instruct the browser where to find
stylesheets & javascript files, as well as
provide meta data about your site.

<body></body>
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 first 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>
<child and sibling y> </child and sibling y>
<child and sibling z> </child and sibling z>
</parent x>

title
base
meta
link
script
style

<title></title>
The title element:
• defines 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

<p></p>
The <p> element is a block-level tag
that contains default space-before and
space-after properties (making indention
unnecessary.)

<h1></h1>
through
<h6></h6>
The header elements are block-level
tags that give you the ability to assign
semantic weight (importance) to your
headlines.

List tags are always used in nested pairs.
The wrapping tags define the list type,
and indicate where the list series begins
and ends.
NOTE

<ul>
<li></li>
</ul>
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.

<ol>
<li></li>
</ol>
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).

(partial list)
big
q
blockquote
cite
i (or) em
small
b (or) strong
sub
sup
del

<br>
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 a
soft return.

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.
<hr>

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:
& &
“ “
” “
‘ &
’ &
– –
— —
© ©
← ←
→ →

<img>
The <img> element is a single, inline
tag that works anywhere in the body
to insert a jpg, png, svg or gif file.

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.
NOTE

<img src="images/logo.gif" alt=”Acme Corp”>
All <img> tags should also contain an
alt attribute. This is “alternate” text
that will appear if for some reason the image
link is broken or the file is unavailable.
EXAMPLE

<a></a>
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 file 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:
<img src=”images/logo.png”>
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.”
<img src=”http://www.mysite.com/images/logo.png”>
index.html
images
logo.png
report.pdf
stylesheet.css

HTML Foundations, part 1

Related slideshows

More Related Content

HTML Foundations, part 1