HTML Basics - Utah Valley University

Download Report

Transcript HTML Basics - Utah Valley University 

HTML Basics
Customizing your site using the basics of HTML
What is HTML?

HTML (Hyper Text Markup Language) is the building
block of all websites. HTML forms the “skeleton” of a
webpage, and is used along with CSS (Cascading Style
Sheets) to create the structure and design of
websites.

HTML uses “tags” to define all of the different
elements of a page, such as headings, paragraphs,
images, and links.
HTML Tag Format
Most HTML tags have opening and closing tags that wrap around
their content, and look like this:
<p>This is a paragraph of text. It is
wrapped by opening and closing paragraph
tags.</p>
Some HTML tags are self-closing, and look like this:
<br/> (This tag creates a line break.)
How is HTML Written and Rendered?

HTML can be created using any text editing software,
such as Notepad (Windows) or TextEdit (Mac).

Once HTML code has been written, and the file has
been saved with a “.html” extension, any web browser
(Internet Explorer, Firefox, Chrome, Safari, etc.) can
render it.
Let’s build a web page!

Open Notepad

First, we’ll add tags to define the beginning and ending of
our HTML document:
<html>
</html>
Let’s build a web page!


Next, we’ll add tags to define the “head” of our page.
Content in the head doesn’t necessarily appear on the
page, but it provides information to the web browser:
<html>
<head>
</head>
</html>
Let’s build a web page!

Inside the head tag, we add a “title,” which is displayed in
the browser window or tab:
<html>
<head>
<title>This is the title of my page</title>
</head>
</html>
Let’s build a web page!

Next, we need to add our body tags, which define the
content that will show up in the body of the page:
<html>
<head>
<title>This is the title of my page.</title>
</head>
<body>This is the content of my page. So far, it’s
only text.</body>
</html>

We’ve built a web page! But, it’s not very interesting, is it?
Formatting Text

First, let’s see how to format our text. First, we’ll put each
sentence of our text inside paragraph tags, so that the
browser will render them as paragraphs:
<body>
<p>This is the content of my page.</p>
<p>So far, it’s only text.</p>
</body>

(If we didn’t wrap our content in <p></p> tags, or
separate it with <br/> tags, there would be no breaks
between one line and the next – everything on the page
would run together.)
Formatting Text

Next, let’s add some formatting to our text. We can
change font styles using HTML. (Other text formatting,
such as colors, fonts, and size are changed with CSS.)

<bold></bold> or <strong></strong> = bold
text

<i></i> or <em></em> = italic text
Formatting Text

Let’s wrap some of our text with tags to change the font
styles:
<body>
<h1>Heading 1</h1>
<p>This is the <strong>content</strong>
of my page.</p>
<p><em>So far</em>, it's only text.</p>
</body>
Formatting Text

We can also use predefined heading tags to format the
headings on our page:
<body>
<h1>Heading 1</h1>
<p>This is the <strong>content</strong> of my
page.</p>
<p><em>So far</em>, it’s only text.</p>
</body>



There are six heading tags: h1, h2, h3, h4, h5, h6
Heading tags run from largest to smallest, meaning that
h1 is very large, and h6 is very small
Heading tags are useful for search engine optimization
Adding Images


Images can be a great way to add color and visual interest
to pages.
The <img> tag is used to insert images; this tag requires
the use of attributes.


src=“image url” – defines the location of the image file,
so the browser knows where to find the image.
alt=“image description” – a brief description or title
for the image
Adding Images

Let’s add an image to our site:
<body>
<h1>Heading 1</h1>
<p>This is the <strong>content</strong> of my
page.</p>
<p><em>So far</em>, it's only text.</p>
<img src=“http://www.uvu.edu/web/images/flower.jpg”
alt=“Flower” />
</body>
Adding Images

We can make some changes to our image by adding
additional attributes:

width=“image width in pixels or
percentage”
height=“image height in pixels or
percentage”


Be careful to adjust width and height proportionally to avoid problems with aspect ratio

Using percentages is preferable for adaptive/responsive design

Width and height don’t both need to be included; the browser will calculate the value of
the missing attribute
<img src=“http://www.uvu.edu/web/images/flower.jpg”
alt=“Flower” width=“150” />
Adding Links



Links are one of the most important elements of any
webpage.
Links can take visitors to pages within our site, external
sites, PDF files, Word documents, etc.
The tags for a link wrap around the text, image, or other
elements that visitors will click on to reach the link.
<a href=“mypage.html”>My Page!</a>
Adding Links

Linking to a page within our site (a relative link) requires
a path to that page relative to the current location:
<a href=“/subfolder/page.html”>My page!</a>

Linking to an external site (absolute link) requires the
entire URL of the site we are linking to:
<a href=“http://www.google.com”>Visit Google</a>

(The absolute URL for a link can be copied from the address bar of your
browser.)
Adding Links

Let’s insert a link that points to the UVU Web Community site.

Since we are linking from a file that is stored locally on our
computer, we’ll need to use an absolute link, so the browser knows
that we’re linking to a file that is not stored on our computer:
<body>
<h1>Heading 1</h1>
<p>This is the <strong>content</strong> of my
page.</p>
<p><em>So far</em>, it's only text.</p>
<img src=“http://www.uvu.edu/web/images/flower.jpg”
alt="Flower" width="150"/>
<br/>
<a href=http://www.uvu.edu/web>Web Community</a>
</body>
Lists

Unordered Lists are useful for displaying bulleted lists of
content. The <ul></ul> tags wrap the entire list, and
<li></li> tags wrap each list item.
<a href="http://www.uvu.edu/web">Web Community</a>
<ul>
<li>List Item One</li>
<li>List Item Two</li>
</ul>
</body>

Ordered Lists work the same way, but they generate a
numbered list and are wrapped with <ol></ol> tags.
Div Tags

Web pages are often organized using <div></div>
tags, which divide the page into different “sections.”


<div></div> tags can wrap a single page element, or a
group of elements.


This allows for a lot of customization using CSS, because each
<div></div> can be styled and moved separately from
others on the page.
<div></div> tags can also be nested
<div></div> tags generally require the use of CSS;
they aren’t very useful without it.
A final note…CSS Styles, IDs, and Classes

HTML tags can be formatted using the style attribute
and CSS styles:
<div style=“text-align: center;”>
<p style=“color: blue;”>This text is blue and
centered on the page.</p>
</div>

However, the preferable method for CSS styling is using
external style sheets, along with IDs and classes to define
styles and formatting – but that’s a topic for another
training session.