Module 3: Introduction to basic HTML
Syntax: example of implementing a web page link
<a href="http://samplewebpage.com">Link to text</a>
Links. What tag do you use for links?
<a>...</a> - Anchor Tag
The <p> element can contain the following tags, and Text, between its opening and closing tags.
<br> <em> <b> <i> <strong> <small> <q> <img> <var> <del> <code> <big>
The <a> tag can also link to a specific location within another web page, or to a specific location within the current web page. Example:
<h2 id="cmht">CMHT</h2> <a href="#cmht">Go to top</a>
_____ is the Opening Tag that tells the browser that every thing between that and the ____ closing tag is an HTML document.
<html>; </html>
Example of image Syntax:
<img src="unt.gif" alt="University of North Texas" height="190" width="190" >
Example of ordered lists:
<ol> <li>This is the first list item.</li> <li>This is the second list item.</li> </ol>
What is an example of the <p> tag?
<p>This text starts a new paragraph. Here is a sample of <i>italic</i> text using the i tag.</p>
Attributes look like this:
<tag attribute="value">Content</tag>
Example of unordered lists:
<ul> <li>This is the first list item.</li> <li>This is the second list item.</li> <li>This is the third list item.</li> </ul>
List - Unordered
<ul>...</ul> - One or more <li> tags are contained between the opening and closing <ul> tags. Each <li> tag defines one list item.
<i>
Defines a part of text in an alternate voice or mood
<wbr>
Defines a possible line-break (not supported in IE)
<q>
Defines a short quotation
<ins>
Defines a text that has been inserted into a document
<mark>
Defines marked/highlighted text
<pre>
Defines preformatted text (preserves spaces, line breaks)
<samp>
Defines sample output from a computer program
<u>
Defines text that should be stylistically different from normal text
Example of emphasis tag:
Example: <p>We sailed in <em>really rough</em> weather.</p>
The <br>tag is used to force a line break
Example: <p>This is before the br tag.<br />This is after the br tag.</p>
Define text markup language
HTML is the text mark up language currently used on the World Wide Web. the main markup language for displaying web pages and other information that can be displayed in a web browser
Not all tags have closing tags like (<html></html>) some tags, which do not wrap around content will close themselves. Example:
Line-break <br />;
closing tags
The </body> and </html> close their respective tags. All HTML tags should be closed.
Emphasis <em>....</em>
The <em> tag is used to emphasize text. The text to be emphasized is placed between the opening and closing tags.
Lists - Ordered <ol>...</ol>
The <ol> tag is used to create an ordered list. One or more <li> tags are contained between the opening and closing <ol> tags.
Tables : <table>...</table> : What does it do?
The <table> element defines the table
Headings <h1> ....</h1> <h2> ....</h2> .... <h6> ....</h6>
The heading tags can be used to introduce a section of a web page by providing a short description
How does HTML work?
When you create a doc with a word processing program like Microsoft Word, the program uses markup language to indicate the structure and formatting of that electronic document.
Tags can also have _______, which are extra bits of information.
attributes
The head element (that which starts with the <head> opening tag and ends with the </head> tag) appears ____ the body element (starting with <body> and ending with </body>) and contains _______ about the page.
before; information
The <p> tag </p>
can be used to start a new paragraph.This element uses separate opening and closing tags. The contents, between the opening and closing <p> tags, will start on a new line. It can contain text and inline tags.
<dfn>
defines a definition text
<code>
defines a piece of computer code
<em>
defines an emphasized text
<b>
defines bold text
<strong>
defines important text
<kbd>
defines keyboard input
<small>
defines smaller text
<sub>
defines subscripted text
<sup>
defines superscripted text
<del>
defines text that has been deleted on doc.
<s>
defines text that is no longer correct
Tags tend not to do much more than mark the beginning and end of an _____.
element
If you imagine a 3x4 table, which is 12 cells, there should be ___ <tr> elements to define the rows and _____ <td> elements within each of the rows, making a total of ____ <td> elements.
four;three;12
Note that the __ tag is only used once - it is supposed to be the main heading of the page and shouldn't be used multiple times.
h1
The <a> tag can be used to implement a ______ to another web resource. A web resource can be what?
hyperlink;an HTML document (webpage), an image, a video, a PDF file, etc.
What is HTML?
hypertext markup language
Attributes appear ____ the opening tag and their ____ is always inside quotation marks.
inside; value
what does the href attribute do?
is used to specify the location of the resource. specifies the URL of the page the link goes to.
The most important headings are generally rendered using a ____ font.
larger
If the href attribute is not present, the <a> tag is ___ a hyperlink.
not
Line breaks: <br> - HTML syntax. This element does ___ require a closing tag.
not
The browser will precede each list item with a ____ (or alternately a letter or Roman numeral by setting the type attribute).
number
The<a> tag allows you to do what?
open the link in a new window, rather than replacing the webpage the user is on.
All you need to remember is that all tags must be closed and most (those with content between them) are in the following format:
opening tag -> content -> closing tag
The <img> tag has two required attributes:
src and alt
The <tr> element defines a ___ ___. The <td> element defines a ___ ___. These must be enclosed in ___ tags.
table row; data cell; <tr>
The basic structure of an HTML document includes ___ which surround content and apply meaning to it
tags
What does the src attribute do?
tells the browser where to find the image. If the image cannot be displayed, the text contained in the alt attribute will be displayed.
What are elements?
the bits that make up web pages. For example, everything that is in-between and includes the <body> and </body> tags is the body element. whereas '<title> University of North Texas </title>' is a title element.
The width and height attributes are necessary because if they are excluded...
the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading
true or false: The information in the head element does not appear in the browser window.
true
Images <img> -HTML syntax. What is it used for?
used to embed an image into a webpage; this element does not require a closing tag
