Main menu
You are here
HTML Notes
[last updated: 2024-01-22]
CSS
using Javascript
-----
- Files with extension .htm or .html are equivalent.
They are both "html files",
and when you double-click either of them, they will load a webpage into a browser.- HTML files contain content and formatting instructions
that your browser uses to construct/display the webpage that you've requested. - html files are text files, composed of a "html" Tag pair and whatever Content is between the tags.
- Tags are words enclosed in angle brackets ("<" and ">").
There are hundreds of different tags defined. For example: <html>
In this case, the "word" html defines this tag.
The html tag is the "main" tag that encloses the entirety of your webpage. (more below)
In fact, the html tag-pair is the minimum sufficient content to make a functional html/webpage file. - Tags should always be used in pairs: an opening tag, and a closing tag (Note: 1)
<html> is the opening tag
</html> is the closing tag - it's the same word, with a "/" in front of it. - Content that is between the opening and closing tags can be instructions to the browser,
or it can be the actual stuff you want to be displayed on the webpage. (Note: 2) - Basic format of html file:
- Suppose you have a text file, with a .htm extension, that has these lines:
<html>
some stuff here ...
</html>If you double-click this file in your file manager, it will successfully load a webpage into a browser,
and display the "some stuff here ..." line of text. - As stated above, the opening and closing <html> tags enclose the entirety of your webpage,
which in this case is just the single line, "some stuff here ..." - You could say this is the minimum functional html file for creating a webpage.
- Of course, it's not very useful except as a demonstration.
It will probably load and display successfully in your browser,
but it almost surely will not have formatting or appearance that you want,
and in fact it may NOT load/display correctly in someone else's computer or browser. - So in order to make your file/webpage more robust and usable on other computers and with other browsers,
and to give it whatever custom formatting you want, there are some things that you must add: - Minimal/template file:
This version is still simple and basic, but way more robust and practical:-
<!DOCTYPE html>
<html lang=”en” manifest="/cache.appcache">
<head>
<title>(put your desired title here...)</title>
<meta charset="utf-8">
<link rel="stylesheet" href="(put the url of your css file here ...)">
<style>
</style>
</head>
<!-- ------------------------------------------------ -->
<body>
<h1>
this is a demonstration heading
</h1>
<p>
This is a demonstration paragraph.
</p>
</body>
</html>
-
-------------------------
Needs edit/cleanup below here ... - Suppose you have a text file, with a .htm extension, that has these lines:
- New things introduced in this minimal file:
- Comments: " <!-- ... -->
- These lines, starting with "<!--" and ending with "-->", are non-functional,
that is, they do not get executed, and are only to explain the code. - line spaces and indentation:
- Similar to comments, indentation and extra blank lines are used to make the code more "readable" and easier to quickly follow what's going on.
Like comments, they have no effect on the execution of the program. - New Tags:
- <head> and <body>:
- <title>:
- This is the label that will be displayed in the browser tab for the page.
- <meta>:
- <link>:
- This is used to specify an external style sheet.
The url to your custom stylesheet (including its .css extension) should be included in the href="..." attribute. - <style>:
- The <style> tags used in the head section allow you to add style (formatting) commands (strictly speaking, CSS rules) that will apply to the entire page.
- in the section below, the " body {...} " and " h1 {...} " are CSS rules,
Using the <style> tag/element in this way is an example of "internal" styling.
<head>
<style>
body {background-color: pink;}
h1 {
color: red;
text-align: center; }
</style>
</head> - See: HTML: style for more information.
- Note: Comments listed between the style tags use a different format/syntax
than those in the HTML file itself. Specifically:
comments are bracketed with " /* ... */ " delimiters.
Note this is the same syntax for including comments in CSS files (see...).
- The <style> tags used in the head section allow you to add style (formatting) commands (strictly speaking, CSS rules) that will apply to the entire page.
- <h1>:
- <p>:
- Going further:
- links:
- If you want to be able to click on a spot on your webpage,
whether an image, a section of text, or a button or other feature,
and be taken to some other page, then you need to define a link. - bookmarks:
- If you want to go to some spot in the body of your destination page,
that is, somewhere other than at the top,
then you need to define a bookmark. - Notes:
- 1: in fact, some tags will work without problems even without a closing tag.
It's never wrong however to use a closing tag even if not functionally necessary. - 2: an Element is defined as the sum total of an opening tag, some content, and a closing tag.
You can say that your entire webpage is an "HTML element", with some content enclosed between its opening and closing html tags.
- 1: in fact, some tags will work without problems even without a closing tag.
-------------------------
-------------------------
-----------------------------------------------------------------------------------------------------
eof