html-markup-language
Some of this document is by The POGIL Project, and licensed under CC BY-NC-SA 4.0.
The Internet is the underlying global network that supports email, the world wide web, and other applications. It consists of many different local networks that are connected together. The web is held together by linked documents written in HTML. In this lab we will focus on the “ML” part.
Model 1 Markup for Reviewers & Editors
Teachers want to provide helpful comments on student essays and reports. However, writing out comments can take a long time, and students often make the same errors. Thus, many teachers use a set of symbols or shorthand that help them to mark up student writing more efficiently. (Copy editors and proofreaders use similar symbols.)
- For the text below, describe three changes required by the markup.
- Why is markup better than just drawing a circle around each problem?
- Explain why it can be helpful to use nonsense words and phrases
when we want to focus on the appearance of text rather than the meaning.
(Obscuring or distorting text is called greeking (as in “it’s Greek to me”),
and the filler text is called lorem ipsum.) - When you write with pen and paper, which sorts of formatting are
- easy?
- difficult?
- Explain why handwriting needs to use some form of markup.
- Today, most word processors (and other editing programs) show what the final printed version will look like. This is called what-you-see-is-what-you-get (WYSIWYG) (pronounced WIZ-ee-wig). However, this requires graphical power, and early computer displays could only show fixed-spaced text, even though printers could use all kinds of formatting effects. (See this for an example.) Explain why the first word processors needed markup.
- Describe some advantages and disadvantages of WYSIWYG.
- In the examples above, the left side shows markup text,
and the right side shows the resulting formatted text. Use this to guess the following:- What is the meaning of <i> and </i>? What might i stand for?
- What markup is used for bold text?
- What is the meaning of <p> and </p>? What might p stand for?
- What markup would you propose for subscripts (e.g. n2) and superscripts (e.g. n2)?
- What is the meaning of ¼?
- In the example above, why do we need to use markup to show <b> and <i> in the right column?
- Each markup feature is marked by a set of characters called a tag.
Thus, <table> is the tag to start a table and </table> is the tag to end the table. - Use this example to decide what tag specifies
- The document type
- The title of the page
- The content that appears within the page
- Other information about the document
- You can learn about HTML from w3schools.com. Go there now and find the “Try it yourself” button. Copy and paste the example code above into the editor (replace what is there).
- Try adding some more headings at different levels to see what they look like. Try out any other markup tags you want.
What did you try? - Try this HTML code:
- What does it look like?
- What does the <strong> tag do?
- Now, just above the <h1> tag, enter this code and run it again:
- What happened?
- Now what does the <strong> tag do?
- What else changed?
- The <style> tag (which usually goes in the <head> section) allows you to modify the appearance of the whole document without modifying anything in the rest of the document. This is called separating format from structure. Why is this important?
- Download the file “strange case.html” that is linked on Canvas.
- Once you download it, if you open the file, what application opens?
- Now that we know something about HTML, we can edit this file. Instead of double-clicking to open, right-click and “open with” a text editor, such as Notepad (Windows) or Notepad++ (on the school laptops). For Mac, you will use TextEdit, but first you have to fix the TextEdit preferences as shown in this screenshot:
If you see <?xml at the top of the HTML file, then you did it right.
- What color is the body background? Where is it set in the HTML document?
- Modify the document so the paragraphs are a different color. Change the body background color. Change any other styles you want. Reload the document in the web browser. Show the result and the code changes to the instructor.
Model 2 Markup for Formatting
The visual appearance of a document’s contents is called formatting—this includes the font, font size, style (e.g. bold, italic, underline), color, and the use of margins, indentation, columns, and other ways to control where the content appears.
Model 3 Markup for Web Publishing
These days, web pages can be built using WYSIWYG editors, or the author can type the markup by hand. Either way, a text file containing the page text with markup is generated. We will type it by hand to get the idea of how it works.
Text with Markup | Formatted text |
<p><i>Cras dignissim magna ac ligula feugiat luctus</i>. Proin diam leo, <b>blandit sed orci vitae</b>, pharetra venenatis arcu.</p><p>Etiam hendrerit hendrerit volutpat. <u>In id lorem nunc</u>.</p> | Cras dignissim magna ac ligula feugiat luctus. Proin diam leo, blandit sed orci vitae, pharetra venenatis arcu. Etiam hendrerit hendrerit volutpat. In id lorem nunc. |
½ × ½ = ¼ <b><i> | ½ × ½ = ¼ <b><i> |
The <p> tag used above is sufficient for short, simple documents, but as documents get longer and more complex, more structural tags can be helpful. For example, we can use <h1></h1> for the biggest, top-level headings, <h2></h2> for smaller, second-level headings, <h3></h3> for third-level headings, etc. Knowing this, sketch on a piece of paper what you think this would look like:
<h1>In id lorem nunc</h1>
<p>Cras <u>dignissim</u> magna ac ligula feugiat luctus.</p>
<p>Proin diam leo, <b>blandit sed orci vitae</b>, pharetra venenatis arcu.</p>
Model 4 HTML Documents
A book is more than a collection of words grouped into sentences and paragraphs. Similarly, an HTML document has a specific structure, as shown below:
My awesome website
This is my awesome website. I bet you can’t wait to check it out.
© by me
” v_shapes=”Text_x0020_Box_x0020_7″>
<h1>In id lorem nunc</h1>
<p>Cras <em>dignissim</em>
magna ac ligula feugiat luctus.</p>
<p>Proin diam leo,
<strong>blandit sed orci vitae</strong>,
pharetra venenatis arcu.</p>
<style>
h1 { color:blue;
text-align:center; }
p { background-color:green;
line-height:110%;
text-indent:3em; }
strong { color:red; }
</style>
Review: 24-bit color
- How many bits in a byte?
- How many different values can a byte have?
- What is the range of values a byte can have (in decimal)?
- What is the range of values a byte can have (in 2-digit hexadecimal)?
- What are the primary colors of light?
- What does RGB stand for, as in RGB color?
- How many different colors can you make using 24 bits?
- Provide a name for each of these colors:
- #ffffff
- #00ff00
- #ffff00
- #ff8800
- Provide a 24-bit hexadecimal code for each of these colors:
- Cyan
- Red
- Black
- Maroon
