{"id":66378,"date":"2022-08-11T09:01:27","date_gmt":"2022-08-11T09:01:27","guid":{"rendered":"https:\/\/www.cryptocabaret.com\/?p=66378"},"modified":"2022-08-11T09:01:27","modified_gmt":"2022-08-11T09:01:27","slug":"a-gentle-introduction-to-html","status":"publish","type":"post","link":"https:\/\/www.cryptocabaret.com\/?p=66378","title":{"rendered":"A gentle introduction to HTML"},"content":{"rendered":"

A gentle introduction to HTML<\/span>
\nJim Hall<\/a><\/span>
\nThu, 08\/11\/2022 – 03:00<\/span><\/p>\n

\n
1 reader likes this<\/div>\n
1 reader likes this<\/div>\n<\/div>\n
\n

I feel confident in claiming that HTML is the most widely used markup language ever. While other markup languages exist, including nroff and groff<\/a>, LaTeX, and Markdown<\/a>, no other markup language is as widespread as the Hyper Text Markup Language. HTML is the de facto language of the Web. First implemented in web browsers in 1994, the language continues to evolve. Yet the basics of HTML remain the same.<\/p>\n

If you are just getting started in HTML, I wanted to offer this gentle introduction to learning HTML. I focus on the essentials of HTML to build a basic understanding of how HTML works. You can use this as a starting point to learn more about HTML.<\/p>\n

Collect words to fill a paragraph<\/h2>\n

Let’s start with a basic understanding of HTML and how client applications like web browsers display HTML documents. At its core, HTML collects<\/em> words in a file and fills<\/em> a paragraph. That means if you don’t add instructions (called markup) to an HTML file, and just leave it as plain text, a web browser turns all that text into a single paragraph.<\/p>\n

Start with this sample text, saved in a plain text file called index.html<\/code>. This is a paragraph from the old King’s Toaster<\/em> story, an Internet fable about how you might build a toaster out of a microcontroller:<\/p>\n

\n
The engineer replied,

\n\"Using a four-bit microcontroller, I would write a simple
\nprogram that reads the darkness knob and quantizes its
\nposition to one of 16 shades of darkness, from snow white
\nto coal black.

\nThe program would use that darkness level as the index to
\na 16-element table of initial timer values.

\nThen it would turn on the heating elements and start the
\ntimer with the initial value selected from the table.

\nAt the end of the time delay, it would turn off the heat
\nand pop up the toast.

\nCome back next week, and I'll show you a working
\nprototype.\"<\/div><\/div><\/pre>\n
You can put this file on a web server and access it like you would any website, or you can save it to your local disk and open it directly in a web browser. How you get the file into the web browser doesn’t really matter. But you should name the file with an .html<\/code> extension, which web browsers recognize by default as an HTML file.<\/p>\n
In this case, I’ve written the file on separate lines. I’ve also added some blank lines, to demonstrate that HTML doesn’t care about extra white space. This extra space may help humans read the HTML code, but the web browser just treats it as one block by default. Viewed on a web browser, this file looks like this:<\/p>\n
\n
  \"The<\/div>\n
Image by: <\/span><\/p>\n
(Jim Hall, CC BY-SA 4.0)<\/p>\n<\/div>\n<\/article>\n
Inline and block elements<\/h2>\n
At the core of HTML is the concept of inline<\/em> and block<\/em> elements. You can think of block elements as always filling a rectangle<\/em>. Inline elements follow only the inline text<\/em>.<\/p>\n
The basic block element is called the division<\/em>, and uses the <div><\/code> tag. The basic inline element is the span<\/em>, with the <span><\/code> tag. Most HTML tags are some kind of block element or inline element, so it helps to start with just these two to understand how they work.<\/p>\n
Add some <div><\/code> and <span><\/code> tags to your HTML document to see what block and inline elements look like:<\/p>\n
\n
<div<\/span><\/a>><\/span>
\nThe engineer replied,

\n\"Using a four-bit microcontroller, I would write a simple
\nprogram that reads the darkness knob and quantizes its
\nposition to one of 16 shades of darkness, from snow white
\nto coal black.

<span<\/span><\/a>><\/span>
\nThe program would use that darkness level as the index to
\na 16-element table of initial timer values.
<\/<\/span>span<\/span><\/a>><\/span>

\nThen it would turn on the heating elements and start the
\ntimer with the initial value selected from the table.

\nAt the end of the time delay, it would turn off the heat
\nand pop up the toast.

\nCome back next week, and I'll show you a working
\nprototype.\"
<\/<\/span>div<\/span><\/a>><\/span><\/div><\/div><\/pre>\n
I’ve added a <div><\/code> block element around the whole paragraph, and a <span><\/code> around just one sentence. Notice that when I start an HTML element like <div><\/code> or <span><\/code>, I need to provide its corresponding closing<\/em> tag like <\/div><\/code> and <\/span><\/code>. Most HTML elements are formed like this, with an opening and closing tag.<\/p>\n
The web browser uses these tags to display HTML content in a certain way, but because <div><\/code> and <span><\/code> don’t really define any special formatting on their own, you can’t see that anything has changed. Your sample paragraph looks the same as before:<\/p>\n
\n
  \"This<\/div>\n
Image by: <\/span><\/p>\n
(Jim Hall, CC BY-SA 4.0)<\/p>\n<\/div>\n<\/article>\n
You can include direct styling<\/em> in these tags with a style instruction, so you can see how the block and inline elements behave. To make the boundaries of each element stand out, let’s use a light blue background for the <div><\/code> block and a pink background for the <span><\/code>:<\/p>\n
\n
<div<\/span><\/a> style<\/span>=<\/span>\"background-color:lightblue\"<\/span>><\/span>
\nThe engineer replied,

\n\"Using a four-bit microcontroller, I would write a simple
\nprogram that reads the darkness knob and quantizes its
\nposition to one of 16 shades of darkness, from snow white
\nto coal black.

<span<\/span><\/a> style<\/span>=<\/span>\"background-color:pink\"<\/span>><\/span>
\nThe program would use that darkness level as the index to
\na 16-element table of initial timer values.
<\/<\/span>span<\/span><\/a>><\/span>

\nThen it would turn on the heating elements and start the
\ntimer with the initial value selected from the table.

\nAt the end of the time delay, it would turn off the heat
\nand pop up the toast.

\nCome back next week, and I'll show you a working
\nprototype.\"
<\/<\/span>div<\/span><\/a>><\/span><\/div><\/div><\/pre>\n
With these changes, the entire paragraph has a light blue background. The <div><\/code> block element is a rectangle, so the blue fills even the empty space after the last sentence ends. Meanwhile, the second sentence has a pink background. This highlight follows the sentence because <span><\/code> is an inline element.<\/p>\n
\n
  \"Adding<\/div>\n
Image by: <\/span><\/p>\n
(Jim Hall, CC BY-SA 4.0)<\/p>\n<\/div>\n<\/article>\n
Most HTML elements are either block or inline. The only difference is these other elements carry some default styles, depending on what they are. For example, <p><\/code> is a block element that has extra space above and below the block. The heading tags, <h1><\/code> through <h6><\/code>, are also block elements defined at different font sizes and text styles like italics and bold. The <strong><\/code> tag is an inline element that displays text in a bold<\/strong> weight. Similarly, <em><\/code> is also an inline element that sets the text in an italics<\/em> style.<\/p>\n<\/p>\n
\n
More great content<\/div>\n
\n
Free online course: RHEL technical overview<\/a><\/div>\n
Learn advanced Linux commands<\/a><\/div>\n
Download cheat sheets<\/a><\/div>\n
Find an open source alternative<\/a><\/div>\n
Explore open source resources<\/a><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
Finishing an HTML page<\/h2>\n
Some HTML elements are required. While the sample HTML file you have used display correctly on any web browser, it is not technically a correct<\/em> HTML page. There are a few elements you need to add:<\/p>\n
Every HTML document should provide a document type declaration. Use the single tag <!DOCTYPE html><\/code> on the first line of the HTML file to define an HTML document. The HTML standard also expects you to wrap the document text in two block elements: <html><\/code> to define the full page, and <body><\/code> to define the document body.<\/p>\n
\n
<!DOCTYPE html><\/span>
<html<\/span><\/a>><\/span>
<body<\/span><\/a>><\/span>
<div<\/span><\/a> style<\/span>=<\/span>\"background-color:lightblue\"<\/span>><\/span>
\nThe engineer replied,
\n...
<\/<\/span>div<\/span><\/a>><\/span>
<\/<\/span>body<\/span><\/a>><\/span>
<\/<\/span>html<\/span><\/a>><\/span><\/div><\/div><\/pre>\n
HTML documents also need a <head><\/code> block before the <body><\/code> that provides meta information<\/em> about the page. The only required meta information is the title of the document, defined by the <title><\/code> element:<\/p>\n
\n
<!DOCTYPE html><\/span>
<html<\/span><\/a>><\/span>
<head<\/span><\/a>><\/span>
<title<\/span><\/a>><\/span>The King's Toaster<\/<\/span>title<\/span><\/a>><\/span>
<\/<\/span>head<\/span><\/a>><\/span>
<body<\/span><\/a>><\/span>
<div<\/span><\/a> style<\/span>=<\/span>\"background-color:lightblue\"<\/span>><\/span>
\nThe engineer replied,

\n\"Using a four-bit microcontroller, I would write a simple
\nprogram that reads the darkness knob and quantizes its
\nposition to one of 16 shades of darkness, from snow white
\nto coal black.

<span<\/span><\/a> style<\/span>=<\/span>\"background-color:pink\"<\/span>><\/span>
\nThe program would use that darkness level as the index to
\na 16-element table of initial timer values.
<\/<\/span>span<\/span><\/a>><\/span>

\nThen it would turn on the heating elements and start the
\ntimer with the initial value selected from the table.

\nAt the end of the time delay, it would turn off the heat
\nand pop up the toast.

\nCome back next week, and I'll show you a working
\nprototype.\"
<\/<\/span>div<\/span><\/a>><\/span>
<\/<\/span>body<\/span><\/a>><\/span>
<\/<\/span>html<\/span><\/a>><\/span><\/div><\/div><\/pre>\n
The supporting tags like <html><\/code>, <head><\/code>, and <body><\/code> do not change how the HTML page appears in a web browser, but they are required for a technically correct HTML document:<\/p>\n
\n
  \"Adding<\/div>\n
Image by: <\/span><\/p>\n
(Jim Hall, CC BY-SA 4.0)<\/p>\n<\/div>\n<\/article>\n
This gentle introduction to HTML provides just the essentials of HTML, but now that you understand block and inline elements, you’re well on your way to learning how to write HTML documents using other HTML tags.<\/p>\n<\/div>\n
\n
Learn the markup language of the web.<\/p>\n<\/div>\n
\n
\n
  \"Digital<\/div>\n<\/article>\n<\/div>\n
\n
Programming<\/a><\/div>\n
Linux<\/a><\/div>\n
Documentation<\/a><\/div>\n<\/p><\/div>\n
What to read next<\/div>\n
\n
How I use the Linux fmt command to format text<\/a><\/div>\n
How I use the Linux sed command to automate file edits<\/a><\/div>\n
Old-school technical writing with groff<\/a><\/div>\n
Create beautiful PDFs in LaTeX<\/a><\/div>\n<\/p><\/div>\n

\n        \"Creative<\/a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.<\/div>\n
\n
\n
Register<\/a> or Login<\/a> to post a comment.<\/div>\n<\/p><\/div>\n<\/section>\n
Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"
A gentle introduction to HTML Jim Hall Thu, 08\/11\/2022 – 03:00 1 reader likes this 1 reader likes this I feel confident in claiming that HTML is the most widely used markup language ever. While other markup languages exist, including nroff and groff, LaTeX, and Markdown, no other markup language is as widespread as the […]<\/p>\n","protected":false},"author":1,"featured_media":66379,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[307],"tags":[],"class_list":["post-66378","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-open-source"],"_links":{"self":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts\/66378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=66378"}],"version-history":[{"count":0,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts\/66378\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/media\/66379"}],"wp:attachment":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=66378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=66378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=66378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}