Scribd
Upload
1K views

Introduction To HTML: Will Kurlinkus

The document provides an introduction to HTML by explaining how to set up a basic HTML document structure using tags like <html>, <head>, <title>, and <body>. It discusses how to enter content, format it using semantic tags like <h1>, <p>, <em>, and <ul>, and add elements like images, links, and comments. The document also introduces div and span tags for dividing and styling document sections, and emphasizes that HTML provides document structure and layout while CSS controls formatting and design.

Uploaded by

Will Kurlinkus
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

Introduction To HTML: Will Kurlinkus

The document provides an introduction to HTML by explaining how to set up a basic HTML document structure using tags like <html>, <head>, <title>, and <body>. It discusses how to enter content, format it using semantic tags like <h1>, <p>, <em>, and <ul>, and add elements like images, links, and comments. The document also introduces div and span tags for dividing and styling document sections, and emphasizes that HTML provides document structure and layout while CSS controls formatting and design.

Uploaded by

Will Kurlinkus
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Introduction to HTML

Will Kurlinkus

[English 2269] http://www.w3schools.com/html/default.asp

[Insert Date]

INTRO HTML
page 2

Creating a document
Rather than beginning to learn markup in a WYSIWYG-enabled program like DreamWeaver, were going to go old 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>>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:

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

[Insert Date]

INTRO HTML
page 3

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.

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 <!--type your note to self here-->

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:
<html>

[Insert Date]

INTRO HTML
page 4

<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 <!-- Heres a test comment --> 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>, Paragraphs: <p>your paragraph of text here</p>

[Insert Date]

INTRO HTML
page 5

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


<li>apples</li> <li>oranges</li> <li>grapes</li> <li>diapers</li>

<ol>

</ol>

Definition List: Sets Off Items Using Indents


<dt>apples</dt> <dd>apples are my favorite fruit, but they have to be ripe. </dd> <dt>oranges</dt> <dt>grapes</dt> <dt>diapers</dt>

<dl>

[Insert Date]

INTRO HTML
page 6

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

[Insert Date]

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.

[Insert Date]

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:[email protected]>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.

[Insert Date]

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

You might also like