HTML Basics Customizing your site using the basics of HTML.
21
HTML Basics Customizing your site using the basics of HTML
-
Upload
addison-retter -
Category
Documents
-
view
226 -
download
1
Transcript of HTML Basics Customizing your site using the basics of HTML.
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.” 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 wrap a single page element, or a group of elements. <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.
