Learn the code to save the net!
This is a tutorial about how to use Hypertext Markup Language to code text documents and books as web pages.
Open this tutorial document in a plain text editor like Gedit or Nano. Do not edit it. Save a backup copy of it as it is.
Read the instructions below to learn enough coding to begin ptactising. Copy some code from this file, paste it into another plain text file and edit that file. Save and close the text file. Rename it with a .html extension. Double click its html filename to open it in a web browser.
Edit the .html file in the plain text editor then refresh the page in the browser to see how those changes look.
To adjust the view in a browser, select view then zoom in on the menu bar. To adjust the width of the page for shorter lines that are easy to read, click near this sign <> at the top right of the screen and drag the window in narrower. Show the sign by clicking the square icon at top right to make the window smaller and show its sidebars. Default body text is easier to read with the window narrowed to about 15 centimetres.
To view the coding in a browser, right-click the page and select view source coding.
Do not edit the template in a word processor or web publishing program because that will corrupt the basic HTML code. Learners often corrupt code by mistake. So first backup this file.
At the end of this file is an almost empty template to work with. Copy and paste the template into a plain text editor or open the copy called tplatebook.html in the text editor.
Web pages need to be coded such that they look more orderly, read easily and can be viewed on large or small screens.
Images shown on a page of text ought to be no wider than 15cm, or less if the text is to be read on very small screens. Narrower images let the screen or window be dragged in narrower so that text can easily be read without being in columns. Any image on a page can be linked to a bigger copy of itself on a separate page. A smaller or thumbnail image can then be clicked to show the bigger image, even as big as the screen or bigger and at higher resolution. A link beside the big image leads back to an anchor at the small image, as does the back arrow.
A separate file called tplatebook.html can be used as an empty template. A copy of that template is near the bottom of this page.
Coding for a web page begins with metadata like that following which usually is not seen by visitors browsing to the page.
Metatags tell browsers and search robots how pages should look and what they are about. The tags are typed between the head tags. Metatags need to be on every page of a website. Metadata and other code is not shown as content on a page.
The title is a sentence or heading that describes the content of the web page.
The keywords tag lists words from the web page that may be used by search engines.
The charset UTF-8 tag helps web servers and browsers to show the website in different languages. Without UTF-8, the default encoding is ISO-8859-1 (Latin1).
The viewport tag make a website look better on the small screens of mobile phones.
A tag does not need an end tag.
There are other metatags that may be used sometimes.
Open this page in a browser and select browser tools, page source to see the metatags.
The metatag is not basic. So delete it if it is there.
Body code follows the head code.
anchor1[Slide margin in to read text.]
Body text goes here.
Copy code out of this page and paste it into a plain text file renamed with a .html ending, to make a template for a new web page.
Do not use any cascading style sheets, CSS, or scan or div tags. Instead, use basic html tags like this:
This is a sentence in Helvetica blue sanserif type font.
No need to use a style=color tag element like this.
Metadata is typed between the head tag and the end head tag.
Headline and body type is written between the body tag near the top of the page and the end body tag near the bottom.
Font size tags give two even bigger headings:
Biggest heading size 7
Big heading font size 6
new paragraph
This is body text.
line breaks here: -
photo caption emphasized in italics
words in bold text
Text for space where image is delayed or missing.
Quotes are needed in that code.
preformatted text name street suburba definition goes here
an indented quotation to illustrate a document.
title of book or film in italics
byline and contact address at end of documentUse the font tag to specify a different typeface. Helvetica and Arial are standard sanserif fonts with type faces which look alright with the standard serif typefaces.
sanserif text
sanserif text
Other fonts may not show in some browsers and standard type faces will show in their place.
This metatag tells a browser how to show a web page on the small screen of a mobile phone:
meta name="viewport" content="width=device-width, initial-scale=1.0".
The style="line-height:150%" tag sets the amount of space between the lines of type on a page. Lines tagged at 100% are too tight together. The tag is like: body style="line-height:150%" .
Font and basefont tags work with most good browsers and without cascading style sheets.
Font size, face and color tags work with browsers Firefox, Brave, Chromium, Luakit and other standard browsers; maybe with Mullvad browser.
Setting font size
Font size = "1"
Font size = "2"
Font size = "3"
Font size = "4"
Font size = "5"
Font size = "6"
Font size = "7"
The default font size is 3. Size 4 body text is easier to read but may be out of proportion to crossheadings or subheadings. Using big tags instead keeps bodytype and headings in proportion.
Relative font size tags say how many sizes larger or smaller the tagged font is to be compared with the preset font size.
Relative font size
Font size = "-1"
Font size = "+1"
Font size = "+2"
Font size = "+3"
Font size = "+4"
Font face tags tell a browsers what font to use if it has that font, otherwise to use another font.
Times New Roman
Helvetica
Comic Sans MS
Noto Mono
FreeSans
Font color tags set the color of a type font. A color can be set by typing the name of the color or the hexadecimal code for the color.
This text is in pink
This text is red
Some browsers show different colors than others.
Basefont tags, or elements, set a default font size, color and typeface for any parts of a document that are not set with font tags. Font tags override basefont tags.
Like font tags, basefont tags take color, size and face attributes, and relative font settings by giving size a value of +1 for a size larger or −1 for smaller.
This is dark grey text with two sizes larger
It is a courier font, a size smaller and black in color.
Body text within a table stays at the default size of 3 when font tags are used to enlarge the rest of the text on a page. Big tags can be used in table code instead of font tags.
Big tags at the beginning and end of the body of HTML make all the headings and body type in the page bigger. Yet the big tags keep different type sizes in proportion with each other.
Big tag makes text bigger like this.
Paragraph text tag
This is paragraph text.
Bigger text code. This is big tag text.
If big tags are used around body text, the text will be out of size to other text on the page. Body text will be as big as crossheads, bigger than photo captions, too big compared with blockquotes and so on. So usually it looks better to use strong or emphasis tags instead of big tags.
If body text is too small to read easily, big tags can enlarge it with all the other type on the page as well. So that headings, body and other blocks of type stay in size with each other. Type a big tab after the body tag at the top of the page and an end big tab just before the end body tag at the bottom of the page.
Big tags have been used since HTML4. CSS later started using big tags. Firefox, Brave, Chromium, Luakit and other browsers still use big tags, with or without CSS. So big tags are standard HTML.
Search this page for more about body type. Elements of the markup language intermix and may be found in different parts of the page under different headings.
Choose text colors that contrast strongly with the background color for easy reading. Black text on a silver background is good. The silver is not glary like a white page.
Black text on a white background is alright to read.
Navy blue body text on a white or silver background is easy enough to read.
White body text needs to be all strong, bold, if it is to be read easily on a dark background. Small text is easier to read over narrower columns.
Other colors can be used for big headings, thick rules and table borders. Some browsers will show other colors differently. Here are a few code numbers for other colors.
Basic standard colors are shown on this chart.
Colors chart
The two element tags <> typed at top of the page remind a web visitor to drag the edge of the screen or window in narrower to make the text easier to read.
Table box for photo and caption.
 Photo caption goes here |
An image can be aligned left, right, centre, top, middle or bottom of text. The face here is aligned right of the text, the graph is top of the rule.
Here is code to put another image on a page.
A wordart logo image like that can be made in a drawing or word processing program. Crop the image from the page by pressing the print screen key and dragging the box around it. Put the cropped image.png file into the same directory as the web page.
Search this page for more about images.
The class=big option puts more space between the lines of body text, making them easier to read. It works with Firefox browser but not with Brave or Luakit.
The small left margin puts the text away from the edge of the screen.
The background color silver has the good contrast with the text without being glary.
An unnumbered bullet list is coded like this:
unnumbered list
The list li tag is used to begin each item on a list. The li does not have an end tag after each item. So a break br tag is not be used.
A definition list is coded like this:
Search this page for more about lists.
Font sizes range from:
Standard default body text.
So use italic text for captions. Caption is emphasised.
Best to use emphasized em tag for italic and strong tag for bold text as those terms are universally accepted. words word Leave underlines words only for links.
Although proportional heading and subheading sizes are limited to h1 and h2 caps and lowercase, smaller headings can be these in the cases shown:
CROSSHEAD
This whole paragraph is indented at left. It is a good style for quotes within a document.Blockquote is like most other tags in HTML code, except the paragraph tag and break tag, in that it needs both a start tag and an end tag.
Here is an example of where line breaks are used. This is how the address tag may be used for tiny type with br tags.
Easy cookingHtml tables have tr row tags but no column tags. They have td table data tags which hold the content and form columns. They also have th tags for a heading.
| MOODS | ||
|---|---|---|
| Mood | Color | Weather |
| Happy | Yellow | Sunny |
| Sleepy | Gray | Cloudy |
Search this page for more about tables.
An image can be shown on a page by typing an image source code with an img src tag and a url address.
That address says the image is in the same directory folder as this html page.
Text automatically wraps around the image.
The black frame shown there is part of the photo, not a coded frame.
anchor2
A picture can be shown in a table on a web page, with spacing and caption and with text wrapping around it. The width of the table is set the same width as the image is to be on the page. The table is set to align on the right and is given cell padding space for around its border. The code below sets cell padding at 5 and table alignment to the right.
Photo caption goes here |
An img tag can be used in the coding to put a picture in the table box. The padding around the box keeps text back from the picture. If the image is in a different directory to the html page, type the full path to that address, like: img src=/directoryname/imagename.jpg
Gthumb imaging program has been used there to crop the black border off the image.
Keep to basic HTML standards by not using other coding like java script, frames, divisions, spans or cascading style sheets. Basic html can be read by more browsers.
A table can make a box to hold separate text, as shown in the code.
| Type separate text in the table code. |
Table code may sometimes be useful to format a page layout into columns or cells. Use a table rather than a frame. Tables are coded with simple, basic html but frames are not. Here is a link to a table page. Right click the page in the browser to show its code.
The table page is linked back to this anchor.
anchor4
Table tags can be used to make banners with matching cutoff lines like this.
BANNER HEADING |
Page cutoff rule
Quotation marks, double quotes, are code characters in HTML. They can also be typed as text in a html document. Escape sequences, like this ", need to be typed instead of quotation marks only if they are in some html code which is typed into the text of a document.
Apostrophes or single quotes are not code in HTML.
A paragraph tag adds a line of blank space above the paragraph. Do not type a p tag to start a heading, list, table or other element. Two break tags add a line of blank space below a paragraph, list or other element if needed.
The following bits of code make parts for forms that are to be filled in on web pages.
Copy some code from here, past it into an empty template, then edit the code in the template.
Here is a template to start with: empty template
anchor5
This code below makes a form field area of 6 rows.
Password field
Name field
An input tag does not have an ending tag.
Checkboxes
Radio buttons
Droplist
Submit button
Reset button
Web site hosting companies install software like PHP on their servers to handle information in forms sent from the web sites they host. The action= code in a form is for the internet address of the form handling software at the hosting company. The handler collects information entered into a form and emails it to the person running the website where the form is.
Respons-o-matic is a web company that handles forms and offers free accounts. There address is https://www.response-o-matic.com . You can sign up for a free account and use their software online to make and edit forms.
Search the next page called hyperlinks.html for more about email.
Hyperlinks link one part of a page to another or one web page to another on the same website or on a page on the internet. Code for writing HTML links is given here
Hyperlinks
A fully qualified domain name is one that gives the full name and directory path pointing to a destination file, like this:
https://www.websitename.com/directoryname/pagename.html
A full address like that is needed to link to a page on another website.
Content is usually best written, edited, proofread and corrected before it is coded for web pages. After it is coded and all the pages are finished, it needs to be checked again.
Do not check and save it with publishing software because that will corrupt the basic coding. Open Terminal and run the spell command like this: $ spell filename.html Spell will quickly list all the errors and html tags in the file.
Skip through the html listed and find any spelling errors in the text. Open the same file in Gedit or another plain text editor. Have Terminal on one side of the screen and Gedit on the other.
Correct the spelling errors. If any html errors are noticed, they can be corrected too. Learners must be careful not to change any good code which has already been tested in a web browser.
Do not use paragraph tags for blank line spacing. Use two break tags instead if needed.
Do not use any ampersands in text because they are used in the code. Use the word and instead. Code uses an ampersand as an escape sequence to show in text a few characters which are used in code. The main code characters are & " < and > .
See quotation above.
Do not use frames for web page layouts because some browsers do not show frames properly. Instead of frame tags, use body and table tags.
Some browsers will not show custom fonts as specified and will substitute basic fonts instead but the wrong size.
Do not type a space next to an element tag < or >. Type for example website but not
website
View page source to see coding.
These five type fonts look too small, even with big tags:
computer codeSample or samp font is only usefull for fine print such as a copyright notice.
Use a font color=blue tag instead of style=color:red tag, to avoid using style sheets.
Big tags make body text out of proportion to crossheads, captions and other blocks of text.
Copyright C Wallace William Baker, 2024,
all rights reserved.
Blank line break
This word links to an anchor at the top of this page.
The contents list goes on the home page only. It links to other pages and they link back to it. The list does not go in a frame on each page. So it only needs to be updated on one page, not many.
