CMPT165-Writing HTML.docx

55 views5 pages
Writing HTML
Basics
•HTML (and some other markup languages) is written with tags
•Tags are used to describe parts of the document (either their appearance or their purpose)
•HTML tags always consist of a few letters surrounded by angle brackets (< >)
•Examples:
<h1> (a page heading)
<p> (a paragraph)
<b> (bold text)
•Tags usually come in pairs
-They have an opening tag (to indicate where something starts) and a closing tag (to indicate
where it ends)
•Closing tags are written with a slash (/) in them, e.g. </h1> </p> </b>
•Example of a tag in action:
-Here is some <b>bold</b> text
•The material between the opening and closing tags is called the tag’s contents (“bold” in this
example)
•The <h1> tag (page heading) has a default style of bold, 24pt Times New Roman
•The <p> tag (paragraph) is 12pt Times New Roman
•Other common HTML tags:
<h2> A “Level 2” heading – basically, a subheading (logical markup)
<h3> A sub-subheading (logical)
<h6> The smallest level of heading (logical)
<i> Italic text (physical markup)
<u> Underlined text (physical)
<em> Emphasized text, displayed by default in italics (logical)
<html> An HTML document
<head> The header, which contains information about the page that is not shown directly on
the page
<title> The page’s title, which is typically displayed in the browser title bar
<body> The body, which has everything that can be seen directly on the page
•Almost all HTML tags can be classified as block-level or inline
•The contents of block-level tags always appear on the line below the contents of the previous
set of tags, rather than beside them
•The contents of inline tags always appear beside the contents of the previous set of tags
-Inline tags are always put inside block-level tags
<h1> and <p> are block-level, while <b> is inline
Whitespace
•In computer science, the term whitespace refers to any character that you can type on the
screen, but can’t actually see
•The three whitespace characters are spaces, tabs and line breaks (also called newlines,
carriage returns, line feeds)
•You can type these characters with the space bar, tab key, and return/enter key, respectively
Unlock document

This preview shows pages 1-2 of the document.
Unlock all 5 pages and 3 million more documents.

Already have an account? Log in
•When you type any combination of whitespace characters in HTML, they will appear in the
browser as a single space
•So, how do you actually get whitespace to appear in the browser?
•For a line break, there are two options
•You can use a block-level element (e.g. <p>)
•You can also use a <br> (break) tag
•Note that the <br> tag has no contents, and no separate closing tag
•To have more than one space in a row, you need to type &nbsp;
-NBSP stands for non-breaking space
• &nbsp; is an example of an HTML entity
Entities
•Entities are used for special characters – that is, anything that you can’t type on a regular
keyboard
•Entities always begin with an ampersand (&) and end with a semicolon (;)
•When you write tags in HTML, they always start and end with angle brackets (< and >)
•But the tags – including the brackets don’t appear on the page
•So, what if you want to have an angle bracket on a page – e.g. for a "less than" or "greater
than" sign?
•Solution – use an entity:
&lt; ("less than" sign appears as <)
&gt; ("greater than" sign appears as >)
•Examples of more entities:
&amp; ampersand (&)
&quot; quote (")
&eacute; e with acute accent (é)
&Eacute; E with acute accent (É)
&copy; copyright (©)
&raquo; right angle quote (»)
&divide; division symbol (÷)
&pi; pi (p)
&ndash; "en" dash ()
Lists
•You can make a list of items in HTML with a combination of two tags:
-First, use the <ul> (unordered list) tag, to specify where the lists begins (and ends)
-Then, inside the <ul> tag, you can put one or more <li> (list item) tags
•With the <ul> tag, all list items will be on a separate line, starting with a bullet (•)
-This is because <li> is block-level
•A variation on the unordered list is the ordered list (<ol>)
•Ordered lists are almost identical, except that instead of having bullets in front of each list
item, they have numbers, starting at 1 and increasing by 1 on each line: 1, 2, 3, 4 …
•You would generally use an ordered list when the order of the items matters
E.g. a list of step-by-step instructions
Unlock document

This preview shows pages 1-2 of the document.
Unlock all 5 pages and 3 million more documents.

Already have an account? Log in

Get OneClass Notes+

Unlimited access to class notes and textbook notes.

YearlyBest Value
75% OFF
$8 USD/m
Monthly
$30 USD/m
You will be charged $96 USD upfront and auto renewed at the end of each cycle. You may cancel anytime under Payment Settings. For more information, see our Terms and Privacy.
Payments are encrypted using 256-bit SSL. Powered by Stripe.