Introduction To HTML: Dr. Will Kurlinkus

Dr.
Will Kurlinkus

[ E n g l i s h 3 1 5 3 ] h t t p : / / w w w . w 3 s c h o o l s . c o m / h t m l / d e f a u l t . a s p

Introduction to HTML
INTRO HTML
page 2

Creating a document
Rather than beginning to learn markup in a WYSIWYG-enabled program like
DreamWeaver, were going to go ol d school and start in a text editor. Because
Microsoft Word has too much rich text styling automatically set, well be using TextEdit
(or Microsoft Notepad if youre on a PC).
To begin, open TextEdit, and create a new document.
Next, well need to adjust the preferences in order to be coding in plain text format,
the format that will be readable by a web browser. So, go to the TextEdit
menu>>Preferences>>Click the Plain Text button>>deselect smart quotes,
dashes, and links>>Go to the Open and Save pane>>Select Ignore Rich Text
Commands in HTML files>>Deselect add .txt extension to plain text files. Note:
Youll have to do this every time you code in our classroom because the settings
get reset nightly
Next well save the document. So, go to file>>Save As and title it. Make sure that
your file title doesnt have spaces (if you want to separate words use an underscore
_), avoid capitalization, dont use special characters (#$%&&^!), and end it in .html.
Name it something specific like your last name and home (kurlinkushome.html),
rather than something generic like My Home, Home, etc. A specific name will
help your reader navigate your site.
Well also want to click the NewFolder Button and name a new folder because its
important that all of our webpages are in the same folder and stay in the same
place. Well talk more about this later.
Entering Some Content
For practice lets enter in some generic content. Well do a bio, so enter your own
information as follows:

Hobbies: Some of my favorite things to do are playing music (I play Will Kurlinkus Bio Page
Name: Will Kurlinkus
Hometown: Roscoe, IL
Major: English: Rhetoric, Composition, and Literacy

Favorite Book: Raymond Carvers short story collection Where Im Calling From
INTRO HTML
page 3

Favorite Movie: Oh Brother! Where Art Thou?
Favorite Food: Water
tenor saxophone, guitar, ukulele, and a little keyboard); rock climbing; swimming; running; and painting.

Save this text and now open the file in a web browser and see what happens.
o The browser ignores a couple things: line breaks, tabs and multiple spaces,
and texts in comments
o The comments function is a nice thing to learn because you can code notes to
yourself that will only show up in the code view but not the browser view. To
do this in html type 
Formatting Content Using (X)HTML Elements
A basic html element looks like this: <element name>Content</element name>
o <opening tag>content<closing tag>
o example: <h1>Will Kurlinkus</h1>
o The browser uses the information in the tag and compares it with its default
style sheet, which tells it how to format the content. So, for instance, in my
example the tag is telling the browser to format my name as an h1 element, a
header of the first (biggest) level.
o Notice all elements have an opening and closing tag; thats how the browser
knows what to format and when to stop formatting it.
o The most important thing to realize when using xhtml markup elements is that
your labeling things and laying them out, not necessarily creating the final
visual design of the sitethats CSS. For instance, while the header 1 example
given above looks like this with the default CSS Header 1 later we
can go in and change the color, font, and size for everything we label as <h1>.
! See a better example here:
http://www.w3schools.com/css/demo_default.htm
Basic Document Structure
The basic parts of an html document should appear as follows:
INTRO HTML
page 4

<html>
<head>
<title>Title Here</title>
</head>
<body>
All your content goes here.
</body>
</html>

Lets return to our bio document and enter the information into this format
o Just for fun, lets also add a comment to see what happens.
<html>
<head>
<title>Will Kurlinkus Bio</title>
</head>
<body>
Will Kurlinkus Bio Page
Name: Will Kurlinkus
Hometown: Roscoe, IL
Major: English: Rhetoric, Composition, and Literacy

Favorite Book: Raymond Carvers short story collection Where Im Calling From
Favorite Movie: Oh Brother! Where Art Thou?
Favorite Food: Water

Hobbies: Some of my favorite things to do are playing music (I play tenor saxophone, guitar, ukulele, and
a little keyboard); rock climbing; swimming; running; and painting.
</body>
</html>

Notice not much has changed, but now at the top of the browser page your title
should appear.

Adding Some Semantic Markup
Heres some of the most common html tags that are used in markup:
o Block elements: These set of things on their own lines (and can be formatted
differently from inline elements in CSS)
! Headers: <h1>your text here</h1>, <h2></h2>,
INTRO HTML
page 5

! Paragraphs: <p>your paragraph of text here</p>
! Line breaks: <br></br>
! Block (long) Quotes: <blockquote></blockquote>
! Preformatted text (for instance if you want to keep all the formatting youve
set up in something like microsoft wordall the bolds, spacing, italics,
etc.): <pre></pre>
! Horizontal rules (lines): <hr></hr>
o Inline Elements: These occur within block elements
! Emphasis (commonly italic): <em></em>
! Bold: <b></b>
! Underline: <u></u>
! Italic: <i></i>
! Quotations: <q></q>
! Bigtext slightly bigger: <big></big>
! Center: <center></center>
! Smalltext slightly smaller: <small></small>
o Three Types of Lists: Again, like all elements the style of lists (what the bullet
points look like, the font, the spacing) can all be changed in CSS later.
! Unordered List: Uses bullets
<ul>
<li>apples</li>
<li>oranges</li>
<li>grapes</li>
<li>diapers</li>
</ul>
! Ordered List: Uses Numbers
<ol>
<li>apples</li>
<li>oranges</li>
<li>grapes</li>
<li>diapers</li>
</ol>

! Definition List: Sets Off Items Using Indents
<dl>
<dt>apples</dt>
<dd>apples are my favorite fruit, but they have to be ripe. </dd>
<dt>oranges</dt>
<dt>grapes</dt>
INTRO HTML
page 6

<dt>diapers</dt>
</dl>
Divs
Div elements are incredibly important! elements that you can create and label
yourself for easier CSS styling later and are generally used to divide up sections
(divisions) of a website. For instance, you might have div elements called Header,
Navigation, Sidebar Footer. Such divisions make the site easier to read in the
markup version but also easier to style because by creating sections you can tell the
browser to style all the paragraphs in one section one way and in another section
another way.
o <div id=whatever division label you want to makeup>All the information of
this section goes inside this div tag</div>
o <div id="links">all my links that I want formatted in a certain way would go
here</links>
Spans
Whereas divs are treated as block elements (see above), spans are make your own
inline elements. Whereas divs are used to format whole sections of a site, spans are
usually used to format individually words and phrases at the sentence level of a
document. A typical span looks like
o <span class=whatever span you want to makeup>asdfasd</span>
o <li><ahref="file:///Users/wkurlinkus/Desktop/willhome/kurlinkushome.html"
><span class="page">Home</span></a></li>
! Heres a span I used in making a practice website. What youre looking
at is one piece of the navigation bar. The span is telling the browser to
format the Home link differently because I want the pages the user is on
to show up differently than the other, non-selected, links.
INTRO HTML
page 7

Empty Elements: Adding an Image
Empty elements like image <img>, line break <br>, and horizontal rule<hr> dont
have content inside the tag.
An image file, then, looks like this: <img src=photo.jpg alt=Picture of Will/>

o Note that the image doesnt have the traditional closing tag <img></img> all
the action occurs inside the tag itself.
o Also note that we used an attribute here. An attribute clarifies or modifies
the element: <element attribute=value /> or <element
attribute=value>content</element>. Attributes should only be placed in the
opening tag and can be listed one after the other as seen in the image tag
above which has both a src attribute and an alt attribute.
o Inside the quotation marks of the source attribute for the image tag above
place the name of your image Will.jpg, make sure you place your image
inside a folder inside your website folder titled image. Inside the alt text
quotation marks place a one or two word description of your imagethis is
required for accessibility purposes and will show up as you hover over the
image.
o Relative linking: Inside your website folder all your images should be inside a
folder labeled images to keep clean organization. In order to draw images
from that folder you need to relative link. So your image element would look
like this <img src=images/wil.jpg alt=Picture of Will>
o There are ways in html to resize images, but its better to resize your images
in photoshop or by using CSS.
o Creating an icon or image without a background: Many images will come with
square white backgrounds from the web. To get rid of that background square
so you can have, for instance, a spider shape on your screen. Go into
photoshop. Use the background eraser tool to get rid of all the white so that
only the image and the empty photoshop canvas (the one that is grey and
white) remain. Then save your file in a PNG format. That is the only format
that will create these transparent images.
INTRO HTML
page 8

Linking
A basic link consists of an anchor tag<a>linked words or content </a>closing anchor
tag
Inside the opening anchor tag you use an href attribute to place the link.
<a href="http://www.w3schools.com">This is the text that will be linked</a>
Absolute URLs provide a link to some document out on the web:
href=http://www.osu.edu

If you want to link to a specific point in a webpage, not just the top of the page,
you need to create two links.
o First, you need to create a unique link flag id at the point of the page you
want to link to. So, for instance, if I wanted to link to a section in the
middle of my page with the heading Reasons Will is Amazing, which
originally looked like <h1>Will is Amazing</h1>. I would write <h1
id=amazing>Will is Amazing</h1>
o Second, I need to use that unique id to create the regular link that sends
the user to that section. <a href=#amazing>Click Here to Go to See the
Reasons Why Will is Amazing</a>
If you want your link to open a new browser window when you click it, you must
add a blank target to your link, which looks like this: <a
href=http://www.osu.edu target=_blank>Click Here to Go to OSU</a>
If you want to add a link that lets the user email you (it opens up the users email
account for them) use a mailto link: <a
href:=mailto:wkurlinkus@gmail.com>Contact Will Kurlinkus</a>
If you want to create an image that is a link (which will be useful for creating
icons) just put the image tag inside the link tag:
o <a href=" http://www.osu.edu "> <img src="smiley.jpg" alt="osu homepage"
width="32" height="32"></a>

Iframe
An iframe is used to display a webpage inside a webpage. Its very similar to, for
instance, scribd.
INTRO HTML
page 9

<iframe src="urlofframedsite" width="200"
height="200"></iframe>

Tables
Rather than me going through tables, Id like you to go to W3schools and see if
you can follow the instructions there because it is such a good resource that
youll need to learn to follow their instructions sometime.
Make a simple 3 row 4 column tablethen I want you to scroll to the bottom of
the W3C table page and make a more complex table following some of the more
examples instructions. Make a table with a header, caption, cell that spans more
than one column, a table inside a table, and mess with cell spacing.

Final Activities
Put a youtube video in your practice site
Put a scribd file in your practice site
Make a 1024x628 background jpeg in photoshop

Introduction To HTML: Dr. Will Kurlinkus

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduction To HTML: Dr. Will Kurlinkus

Cargado por

Copyright:

Formatos disponibles

Dr.

También podría gustarte