HTML
Table of Contents
during lecture, one of my CS professors suggested learning HTML, CSS, and JavaScript when we had time. this inspired me to create my first website. I didn’t know any html before this, so I figured I’d compile a list of the commands I used to make this website for my own reference.
note: all credit goes to W3 Schools. they have very clear, extensive information on HTML. a lot of the stuff I wrote was taken word-for-word from their website.
links:
introduction
everything else
1. Introduction
- HTML
- the standard markup language for creating web pages.
- Stands for Hyper Text Markup Language
- Describes the structure of a web page.
- Consists of a series of elements.
Elements tell the browser how to display the content.
- Labels piece of contents as headings, paragraphs, links, etc.
- defined by a start tag, some content, and an end tag.
<tagname> [content] </tagname>
Web browsers are responsible for reading html files and displaying them accordingly.
Sample Page Structure:
<html> <head> <title> [page title] </title> </head> <body> <h1> [heading] </h1> <p> [paragraph] </p> </body> </html>
Many html versions have emerged since the beginning of www (world wide web).
2. <!-—>
<!--[comment]-->
Denotes a comment.
- Used for single and multi line comments.
2.1. //
<script type="text/javascript"> <!-- function displayMsg() { alert("Hello World!") } //--> </script>
Starts a single-line comment in Javascript.
- Prevents accidental execution of –>.
- Code inside the <!–//–> is not executed.
3. <!DOCTYPE>
<!DOCTYPE html>
Tells the browser what document type to expect.
- Not case sensitive.
4. <title>
<title>[title]</title>
Defines the title of the document.
- Shown in the browser’s title bar or page’s tab.
- Required in html documents.
- Cannot have more than one in an html document.
5. <style>
<style> h1 {color: red;} p {color: blue;} </style>
- CSS
- Cascading Style Sheets.
Used to define style information (CSS) for a document.
- Specify how html elements should render in browser.
- Must be included inside head section of document.
- If some properties were defined for the same element in different style sheets, the last style sheet will be used to determine the style of the element.
6. <body>
<body> <h1> [heading] </h1> <p> [paragraph] <p1> </body>
Defines the document’s body. Can only be one body element in an html document.
- Contains html document contents such as:
- headings
- paragraphs
- images
- hyperlinks
- tables
- lists
- etc.
7. <img>
<img src="source/path" alt="alternate text" width="width of image shown" height="height of image shown">
Used to embed an image into an html page.
- Images are linked to web pages rather than inserted.
- Specifies path to the image.
- Specifies an alternate text for the image, if the image cannot be displayed for whatever reason.
Page might flicker if width and height are not specified.
8. <p>
<p>[paragraph]</p>
Defines a paragraph.
- Browsers add a single blank line before and after each paragraph element automatically.
9. <html>
<html lang="en"> <head> <title>[title]</title> </head> <body> <p>[paragraph]</p> </body> </html>
Represents the root of an html document.
- Acts as the container for all other html elements except for <!DOCTYPE>
- lang attribute is used to declare the page’s language.
- assists search engines and browsers.
10. <a>
<a href="hyperlink">Hyperlink Name</a>
Defines a hyperlink.
- Used to link from one page to another.
- href attribute indicates the link’s destination.
- If there isn’t one, it acts as a placeholder for a hyperlink.
- Linked page is typically displayed in current browser window unless another target is specified.
11. <head>
<head> <title>[insert title]</title> </head>
Container for metadata.
- Metadata is not shown on webpage.
- Placed between <html> and <body>.
- Typically used to define the title, character set, styles, scripts, etc.
- title is always required.
12. <meta>
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head>
Defines metadata about an HTML document.
- Always placed inside <head>.
- Typically used to specify character set, page description, keywords, author of the document, and viewport settings.
- Not displayed on the webpage.
- Used by browsers, search engines, and other web services.
13. <script>
<script> document.getElementById("demo").innerHTML = "[insert text to print]"; </script>
Used to embed a client-side script (JavaScript).
- Client-side script
- process where scripts are executed by web browsers rather than servers.
Either contains scripting statements or points to an external script file.
14. <div>
<div class="div_name">
<h>[insert heading]</h>
<p>[insert paragraph]</p>
</div>
Defines a division or section in an HTML document.
- Container that is styled (CSS) or manipulated (JavaScript).
- Styled using the class or id attribute.
- A class name can be used my multiple HTML elements, while an id name can only be used with 1 HTML element.
- Can describe the role of an element using the role attribute.
- Ex: doc-toc = table of contents.
- Any content can be added into <div>.
- Browsers typically place a line break before and after the <div> element.
15. <span>
<p>[<span style="color:blue">insert paragraph</span>]</p>
Inline container used to markup a specific part of a text/document.
- Styled (CSS) or manipulated (JavaScript) using the class or id attribute.
- Similar to <div>.
- <div> is a block-level element.
- <span> is an inline element.
16. <br>
<p>[insert<br>paragraph]</p>
Inserts a line break.
- Does not have an end tag.
17. <b>
<p><b>[insert bold paragraph]</b></p>
Specifies bold text.
18. <ul>
<ul> <li>[insert item1]</li> <li>[insert item2]</li> <li>[insert item3]</li> </ul>
Defines an unordered (bulleted) list.
- Used in conjunction with <li>.
19. <li>
<ul> <li>[insert item1]</li> <li>[insert item2]</li> <li>[insert item3]</li> </ul>
Defines a list item.
- Can be used inside <ol>, <ul>, and <menu>.
- <ul> and <menu> display the items with bullet points.
- <ol> displays the items with numbers/letters.