Web Design and Publishing - HTML Basics - …webdesign.saramshields.com/files/html_basics.pdfMC 4315...

M C 4 3 1 5 – W e b D e s i g n a n d P u b l i s h i n g

HTMLI n t r o d u c t i o n t o H T M L


W E B T E R M S

HTML

Structure (Content)

CSS

Presentation (Style)

JavaScript

Behavior (Interactivity)

CMS

Content Management System


A B O U T

HTML stands for Hypertext Markup Language; the

language of the Web. HTML files are text files that

include tags that indicate format, style and layout

functions. A Web browser reads the HTML file and

interprets the tags, thus presenting the information

in the way the designer intended.


W H A T A R E T A G S ?

A tag is a command written between angle brackets (the less than and greater than symbols)

Example: <html>

Some tags have attributes that provide a variety of options within the tag. The attributes have associated values deemed by the

designer. The value must be surrounded by quotation marks.

Example: <tag attribute="value">

<font color="#000000"> or <font color="black">

Most tags must also be closed after inserting the contained text.

Example: <strong> Hello World! </strong>

The strong tag makes text bold. The closing tag </strong> makes sure no other text is bolded in the document.


BASIC TAGS


T A G E X A M P L E S

<html> the opening tag on every HTML page. This tells the browser that this is an HTML file

<head> this indicates the heading of the document. Nothing in the head shows up on the page, this is where designers store

information about the title, special search terms associated with the page and include stylesheets and JavaScript

<title> this indicates the title of the page. This title does not show up on the page itself, but in the title bar/tabs of the browser

<body> this indicates the beginning of the section with content in it. This is where the actual site content goes; text, images,

multimedia, etc.

<strong> makes text bold

<em> makes text italic

<h1> <h2> <h3> <h4> this indicates a level of heading size. You can use the different headings to set up the format of your page and

indicate different sections, titles, and subtitles

<p> indicates the opening of a paragraph, this puts space between it and previous content

</br> this provides a line break without the spacing of a paragraph. This is a standalone tag


H T M L T A G

An HTML document must have an opening and closing HTML tag

<html>

</html>


H E A D T A G

Following the opening HTML tag is the head tag. The head of an HTML file contains all of the non-visual elements that make a page

work (like CSS, JavaScript, etc)

<html>

<head>

</head>

</html>


T I T L E T A G

The title tag places a title on a web tab that describes the web

page

<html>

<head>

<title> Sara’s Website </title>

</head>

</html>


B O D Y T A G

The body tag follows the closing head tag. All visual elements are contained within the body tag (content, images, links, etc)

<html>

<head>

</head>

<body>

</body>

</html>


T E X T F O R M A T T I N G T A G S

<html>

<head>

<title> </title>

</head>

<body>

<h1>This is a heading</h1>

<h2>This is a subheading</h2>

<p>This is a paragraph</p>

</body>

</html>

This is a headingThis is a subheading

This is a paragraph


F O R M A T T I N G E L E M E N T S

<html>

<head>

<title> </title>

</head>

<body>

<p> <strong>This is bold text</strong> </p>

<p> <em>This is italic text</em> </p>

<p> <u>This is underlined text</u> </p>

</body>

</html>

This is bold text

This is italic text

This is underlined text


H O R I Z O N T A L L I N E

<html>

<head>

<title> </title>

</head>

<body>

<h1>This is a heading</h1>

<hr/>


</body>

</html>

C O M M E N T S

The browser doesn’t display comments, but they help document the HTML and add descriptions, reminders, or other notes.

<html>

<head>

<title>Sara’s Website</title>

</head>

<body>




</body>

</html>


S A M P L E S T R U C T U R E

<html>

<head>

<title>Sara’s Website</title>

</head>

<body>

<h1>Check out my Website!</h1>

<p>This is Sara’s Website</p>

<h2>About Me</h2>

<p>This is a paragraph where I would include information about myself</p>

<h2>Education</h2>

<p>This is a paragraph where I would include information about my education</p>

<h2>Contact Information</h2>

<p>This is where I would include my contact information</p>

</body>

</html>


ATTRIBUTES


A T T R I B U T E S

Attributes provide additional information about an element or a tag, while also modifying them. Attributes have a value, and the value

modifies the attribute.

<tag attribute="value">

<p align="left">This is a left-aligned paragraph</p>

<font color="blue">This makes a font blue</font>


IMAGES


I N S E R T I N G I M A G E S

First of all, you need a digital image. Web browsers can read .jpg .gif and .png files. When working with images, you always want to

work in the same directory as the page you are working on. To achieve this, create a folder and make sure you have both your HTML file

and image file in the same folder. If the image is in a different folder than where the HTML document is, the image will not load when

viewing the website. If I have an image called oldmain.jpg and I wanted to put it on my website, I would create the following HTML

code

Example: <img src="oldmain.jpg" />

If I had a folder called ‘website’ and within that I had another folder called ‘images’ I would create the following HTML code

Example: <img src="images/oldmain.jpg" />

The reason the first example did not need this is because the image was housed in the same location as the index file


I M A G E T A G S

The img tag is used to insert an image. It contains only attributes and does not have a closing tag (standalone tag). The images URL

address can be defined using the src attribute. The HTML syntax looks like:

<img src="image.jpg">

Image location is important because you must have your image in the same location as your HTML file.

When renaming images, keep the names lowercase, short and simple and with no spacing.


I M A G E A T T R I B U T E S

<img src="image.jpg" alt="This is text for Screen Reader" title="Image Title for Hover" width="200px" height="200px" />

src – the file source of the image

alt – this is alternative text that shows when an image is not available or when someone is using a text reader (for visually impaired)

title – the text that you see when you hover over an image

width and height – this is where you can choose specific dimensions of the file. Be careful using this because improper use can distort your

image on the web

align – you can left or right align the image to wrap it around text

If you wanted a background image, you would use <body background="oldmain.jpg" />


LINKS


L I N K T A G S

You can add links to text or images that will enable the user to click on them in order to be directed to another file or webpage.

<a href="http://www.txstate.edu">Link</a>

The target attribute specifies where to open the linked document. Giving a _blank to the attribute will open the link in a new window.

<a href="http://www.txstate.edu" target="_blank">Link</a>


E X T E R N A L L I N K S

<a href="http://www.txstate.edu" target="_blank">Texas State</a>

This should always be an absolute link reference, meaning the specific location is used as the attribute value. You must include the

http:// in front of the URL to make an external link. It’s a good idea to have your links open in a new window – this is what

target="_blank" does.


R E L A T I V E L I N K S

<a href="index.html">Home</a>

This is considered a relative link reference, because it refers to the location of the file as it relates to the current file. The same link on

someone else’s page would not bring them to your Home Page. You can also include directory structure in the link reference if the file is

not in the same directory as the page with the link. For example, if the page you are working on is in your main directory and the file you

are linking to is in a directory on your website called “project1” that is below your main directory, then the tag would look like <a

href="project1/index.html">Project 1</a>

Remember, use absolute references for links to other sites and relative references for links in your own site.


I M A G E S A S L I N K S

<a href="http://www.txstate.edu"><img src="oldmain.jpg" /></a>

This inserts a picture of the tower as the icon for the link. You can use this feature to use your own icons for links.


C R E A T I N G A N E M A I L L I N K

<a href="mailto:[email protected]">[email protected]</a>

These links aren't as popular as before, people now use web-based email services like Gmail. Make sure you include the email address

as the link text so it can be easily copied and pasted.


LISTS


O R D E R E D L I S T S

An ordered list is a numbered list that starts with an <ol> tag. Each list item is defined by the <li> tag.

<ol>

<li>Cats</li>

<li>Dogs</li>

<li>Rabbits</li>

</ol>

Ordered lists can have two attributes: type and start

<ol type="i"> Type numbers are default (1, 2, 3) but you can use "A" for capital letters,

"a" for lower case, "I" for uppercase Roman numerals and "i" for lowercase Roman numerals

<ol start="0"> This creates the start value; the number 1 is default


U N O R D E R E D L I S T S

An unordered list is a bulleted list that starts with an <ol> tag. Each list item is defined by the <li> tag.

<ul>

<li>Cats</li>

<li>Dogs</li>

<li>Rabbits</li>

</ul>

Unordered lists can have one attribute: type

<ul type="square"> This attribute sets the bullet shape (disc, circle, square)


TABLES


T A B L E T A G S

Use tables for data, not formatting. To create a table, you use these nested tags:

<table> <tr> <th> <td>

(table row) (table header) (table data)


T A B L E E X A M P L E

Tables are defined by using the <table> tag. They are then divided into table rows by using the tag <tr>

<table>

<tr>

<th>Fav Animal</th>

<th>Fav Show</th>

<th>Fav Colors</th>

</tr>

<tr>

<td>Cats</td>

<td>The 100</td>

<td>Blue</td>

</tr>

<tr>

<td>Dogs</td>

<td>The Bold Type</td>

<td>Purple</td>

</tr>

<tr>

<td>Parrot</td>

<td>Greys Anatomy</td>

<td>Green</td>

</tr>

</table>


T A B L E A T T R I B U T E S

Tables have four attributes: border, bordercolor, width, and align

border – this sets the size of the border

bordercolor – for a solid border

width – this sets the amount of space it takes up on a page. You can use pixels for a fixed width or % for a width as a percent of screen size

align – this horizontally aligns the table; right, center, or left


T A B L E E X A M P L E W I T H B O R D E R S

Tables are defined by using the <table> tag. They are then divided into table rows by using the tag <tr>

<table border=“2>

<tr>

<th>Fav Animal</th>

<th>Fav Show</th>

<th>Fav Colors</th>

</tr>

<tr>

<td>Cats</td>

<td>The 100</td>

<td>Blue</td>

</tr>

<tr>

<td>Dogs</td>

<td>The Bold Type</td>

<td>Purple</td>

</tr>

<tr>

<td>Parrot</td>

<td>Greys Anatomy</td>

<td>Green</td>

</tr>

</table>


RESOURCES


O U T S I D E R E S O U R C E S

www.w3schools.com

www.sololearn.com

www.lynda.com

www.codeacademy.com


CHECK OUT AN EXAMPLEwww.saramshields.com/p1

Web Design and Publishing - HTML Basics - …webdesign.saramshields.com/files/html_basics.pdfMC 4315...

Documents

Transcript of Web Design and Publishing - HTML Basics - …webdesign.saramshields.com/files/html_basics.pdfMC 4315...