- As we said before, documents are made up of elements that are marked with tags.
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element is a good reference.
- Tags have content
- These can be simple text
- Or more tags.
- In general, the end document is a DAG, probably a tree.
- The HTML tag
- reference
-
<html> body </html>- In this case, the body should be in the following form
<html> <head> header content </head> <body> body Content </body> </html>
- In this case, the body should be in the following form
- It can also have attributes
-
<html lang="en" version="3.2"> body </html> - These can be part of the standard or user added.
- In this case, these are both for informational purposes.
- In other cases they will change the appearance or behavior of the element.
- In general, we will use few of these.
-
- Some other tags
- reference
- <head>
- sort of like the
#includesection of c++ code. - Mostly information for the html parser.
- We will include javascript code here.
- sort of like the
- <body>
- The main document content.
- <a>
- An anchor for a hyperlink
- Needs the href attribute
-
<a href="url">text</a>
- <pre>
- Preformatted text.
- Whitespace is preserved.
-
This is inside a <pre> box The whitespace is not changed. But html items are interpreted. By the way, my default css puts a box around pre sections.<pre>This is inside a <pre> box The whitespace is not changed. But <b>html</b> items are interpreted. By the way, my default css puts a box around pre sections.
- <div>
- A container
- Nothing to see here, but we will use this later.
- <h#>
- Headers, # is 1 through 6
This is a h1
This is a h2
This is a h3
This is a h4
This is a h5
This is a h6
- Headers, # is 1 through 6
- <ul>
- Unordered list.
- Elements are marked with <li> tags.
- Also ol for ordered list and others.
- <p>
- Paragraph.
- I tend to use this to generate newline characters.
- But this should be done
with <br>
- <code>
- for computer code
-
this is in a code block
- <img>
- An image
- attribute : src="url"
-
- <table>
- <tr> to begin a row
- <th> for a header data item
- <dt> for a data data item.
A header Another header A header Some data - I tend to include border.
- We will add these later:
- <script>
- <button>
- <input>
- <label>
- <canvas>
- A big attribute
- Any item can be labeled with a unique id
- < tag id="id_value">
- We will use this in javascript to access elements.
- The ID should be unique.
- There are many other tags, use them as you wish.