BASIC GUIDE TO SIMPLY MANAGE HTML
The following is an abstract from www.w3schools.com site.
HTML
HTML (Hyper Text Markup Language) is the standard markup language for creating Web pages. It describes the structure of Web pages using markup.
HTML elements are the building blocks of HTML pages and are represented by tags.
HTML tags normally come in pairs like <tagname> and </tagname> that are the start tag and the end tag.
The browser does not display the HTML tags, but uses them to determine how to display the document.
Right-clicking in an HTML page and selecting “View Page Source” (in Chrome) or “View Source” (in IE), or similar in other browsers, will open a window containing the HTML source code of the page. You can also right-click on an element (or a blank area) and choose “Inspect” or “Inspect Element” to see what elements are made up of. Then you can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
HTML Page Structure
Below is a visualization of an HTML page structure:
Only the content inside the <body> section (the white area above) is displayed in a browser.
The <head> element is a container for metadata. HTML metadata is data about the HTML document that is not displayed.
HTML Elements
The HTML element is everything from the start tag to the end tag with the content inserted in between:
<tagname>Content goes here…</tagname>
All HTML documents consist of nested HTML elements:
<html>
<body><h1>My first Heading</h1>
<p>My first paragraph.</p></body>
</html>
NOTE: The <!DOCTYPE html> declaration defines this document to be HTML5
HTML elements with no content are called empty elements:
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Style of HTML Elements
Setting the style of an HTML element, can be done with the style attribute.
The style attribute is used to specify the styling of an element, like color, font, size etc.
The HTML style attribute has the following syntax:
where the property is a CSS property and the value is a CSS value.
CSS stands for Cascading Style Sheets and describes how HTML elements are to be displayed on screen, paper, or in other media.
You can learn more about CSS, reading the next HTML guide we will provide soon.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code since the browser will remove any extra spaces and extra lines when the page is displayed.
NOTE: The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
HTML Editors
Web pages can be created and modified by using professional HTML editors.
However, using a simple text editor (e.g. Notepad for PC or TextEdit for Mac) is probably the better way to learn HTML.
In order to create your first web page with Notepad or TextEdit, follow the four steps below:
- Open Notepad (or TextEdit) application
- Write or copy some HTML into Notepad
- Save the HTML Page using either .htm or .html as file extension
It is recommended to set the encoding to UTF-8 (which is the preferred encoding for HTML files)
Note: once you have chosen the encoding, it is necessary to specify it in the head section of the page, using meta tag:
<meta charset= “UTF-8”> - View the HTML Page in your Browser
- You can double click on the file
- or right-click – and choose “Open with” to select your preferred browser
- In case you want to modify your work, open the same file right-clicking on and choosing “Open with Notepad”
HTML Colors
Go to the main guide to discover some ways to codify colors: www.w3schools.com – html colors
HTML Language
The language of the document can be declared in the <html> tag using the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search engines.
You can manage it filling in html tag as follow:
<html lang= “en-US”>
HTML Tag portions
Basically we use three main tag parts:
- Elements
- Attributes
- Properties
HTML Elementes
We have already described them above.
HTML Attributes
- All HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name= “value”
SAMPLES:
<a href= “https://www.w3schools.com”>This is a link</a>
<img src= “img_girl.jpg”>
<img src= “img_girl.jpg” width= “500” height= “600”>
<html lang= “en-US”>
Style Attribute, already describded above, has own syntax:
where there could be some properties applied.
HTML Properties
SAMPLES:
Have a look to the most useful tags list
| HTML Head | <head>My first head</head> |
| HTML Body | <body>My first body</body> |
| HTML Document | <html>My first page</html> |
| HTML Heading | <h1>My first heading</h1> <h2>My first heading</h2> <h3>My first heading</h3> <h4>My first heading</h4> <h5>My first heading</h5> <h6>My first heading</h6> |
| HTML Paragraph | <p>My first paragraph</p> |
| HTML Link | <a href= “http://infodoc.altervista.org/”>This is a link</a> |
| HTML Image | <img src= “http://infodoc.altervista.org/wp-content/uploads/2018/11/computer-pc-1.jpg” alt= “Infodoc Scuola” width= “104”> |
| HTML Button | <button>Click me</button> |
| HTML List | <ul> <li>Basic Concepts</li> <li>Data Encoding</li> <li>World Wide Web</li> </ul> |
| HTML Table | <table> <tr> <th>Class</th> <th>Name</th> <th>Surname</th> </tr> <tr> <td>4B</td> <td>Brad</td> <td>Pitt</td> </tr> <tr> <td>4B</td> <td>Tom</td> <td>Cruise</td> </tr> <tr> <td>5C</td> <td>Johnny</td> <td>Depp</td> </tr> </table> |
| HTML Horizontal Rule | <hr> |
| HTML Line Break without starting a new paragraph | <br> |
| HTML Preserving element (preserves both spaces and line breaks) | <pre> One apple a day keeps the doctor away </pre> |
| HTML Bi-Directional Override | <bdo dir= “rtl”>This text is written from right to left</bdo> |
| HTML Comment Tags | <!– This is a comment –> |
| HTML Background Color | <body style= “background-color:powderblue;”> … </body> |
| HTML Text Color | <h1 style= “color:blue;”>This is a heading</h1> <p style= “color:red;”>This is a paragraph</p> |
| HTML Fonts | <h1 style= “font-family:verdana;”>This is a heading</h1> <p style= “font-family:courier;”>This is a paragraph</p> |
| HTML Text Size | <h1 style= “font-size:300%;”>This is a heading</h1> <p style= “font-size:160%;”>This is a paragraph</p> |
| HTML Text Alignment | <h1 style= “text-align:center;”>Centered Heading</h1> <p style= “text-align:center;”>Centered paragraph</p> |
| HTML Text Formatting | <b> Bold text </b> <strong> Important text </strong> <i> Italic text </i> <em> Emphasized text </em> <mark> Marked text </mark> <small> Small text </small> <del> Deleted text </del> <ins> Inserted text </ins> <sub> Subscript text </sub> <sup> Superscript text </sup> |
| Background Color | <h1 style= “background-color:LightGray;”>Hello World</h1> <p style= “background-color:Violet;”>Infodoc here</p> |
| Text Color | <h1 style= “color:Violet;”>Hello World</h1> <p style= “color:Orange;”>Infodoc here</p> <p style= “color:SlateBlue;”>Infodoc here</p> |
| Border Color | <h1 style= “border:2px solid Gray;”>Hello World</h1> <h1 style= “border:2px solid LightBlue;”>Hello World</h1> <h1 style= “border:2px solid Violet;”>Hello World</h1> |
| Title Attribute (displayed as a tooltip when you mouse over the element) | <p title= “I’m a tooltip”>This is a paragraph</p> |
| To find more elements go to https://www.w3schools.com/tags/default.asp | |
Websites Layout
Click here in order to reach a great site that teaches the CSS fundamentals used in any website’s layout (qui per la versione italiana del sito). Furthermore, please have a look to the following links:
Reach the parent page