HTML Basics

HTML stands for Hypertext Markup Langauge. Hypertext - text displayed on a computer that has links to other hypertext documents. Markup Language - let's you annotate text to define how it should be displayed.

HTML Tags

HTML is made up of tags markup the text of a document in order to tell the browser how it should be displayed.

Enclosed in angle brackets: <h1>
Not displayed on the resulting web page
Inform the browser about how certain elements should be displayed.

HTML Structure

<!DOCTYPE html>
<html>
    <head>
        <title>Your Page Title</title>
    </head>

    <body>
        <!--This is where you will be writing your sigma code-->
    </body>
</html>

The <head> tag contains information about your website or metadata. This where title, language or time-zone is indicated. The <body> tag contains everthing that will be displayed to the user.

Tags can go inside other tags
We use indenting to show the structure of the tags
The structure of an html document is a tree
Typically, tags come in pairs - openning and closing tags.

Basic Tags:

<h1> - Heading one tag. typically used to indicate headings in the page. \

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

<p> - Paragraph tag. These used to include a paragraph of a text. Note that there is an automatic line break (new line) after these tags.
<i> - Italized text. These make the text cursive.
<b> - These help to make the text bold.
<hr> - Horizontal Rule. No closing tag. Creates a horizontal line on the screen.

<br> - Line Break. Creates a new line.

Horizontal Rules

<s> - Strinkethrough tag. ~~This is what it looks like~~

Some other examples of tags

<p>
    This is text that is <strong>important</strong>.
    <br>
    This is text that needs <em>emphasized</em>.
    <br>
    This is text that needs <mark>highlighted</mark>.
</p>

Lists ordered vs unordered.

Lists can be done in ordered and unordered fashion. Following are the examples:

Ordered:

Item 1
Item 2
Item 3

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Unordered:

Item 1
Item 2
Item 3

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Links

Linke can be done using <a> tag. The following is an example of a link to google site.

<a href="google.com">
  Click here to go to Google
</a>

Click here to go to Google

HTML attributes

<tag attribute="value">Tag content here</tag>

Some of the tags will include html attributes. In the example above, "href" is the name of the attribute and "google.com" is the value of that attribute. \

images

Image tag in HTML is <img> and it doesn't have a closing tag. Image tag helps us insert images into our pages through "src" attribute.

<img src="/images/random-image.jpeg" alt="Image not found" width="50px" height="50px">

Navigation Bar

Having easy to use navigation bar is important for every website. The following is an example of a navigation bar:

<nav>
  <li><a href="home.html">Home</a></li>
  <li><a href="news.html">News</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="about.html">About</a></li>
</nav>

CSS basics

Why Use CSS? \

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

Adding External CSS

Rather than putting all of our CSS rules in a style tag, it's also possible to add CSS code that's written in a separate file. The file should be a .css file, such as my_style.css
Example:
my_page.html

<html>
    <head>
        <title>Your Page Title</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>CodeHS</h1>
    </body>
</html>

style.css



selector {
    property: value;
    property: value;
}

h1 {
    font-size: 30px;
    color: red;
    text-align: center;
}

h1 is a selector in CSS (it points to the HTML element you want to style: h1).
color is a property, and red is the property value
text-align is a property, and center is the property value

CSS selector by tags.

Styling HTML can be by tags. The following code selects all h1 tags and styles the font-size to be at 30px and color at red.

h1 {
    font-size: 30px;
    color: red;
}

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:

Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

The CSS element Selector

Here, all <p> elements on the page will be center-aligned, with a red text color:

p {
  text-align: center;
  color: red;
}

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
  text-align: center;
  color: red;
}

The CSS class Selector

Class is an attribute that we can add to html tags to style a group of elements. If we use a class as a selector, it selects all the elements that share that class.
The class style overrides tag style in case of a conflict. In other words, if a select-by-tag rule says that the element should be red, and a select-by-class rule says the same element should be green, the class rule takes precedence and the element will be green.
You can add a class to a tag like this:

<tag class="class-name"></tag>

You can add multiple classes to a tag by separating class names with spaces:

<tag class="class1 class2 class3"></tag>

Class names:

Cannot start with a number
Should be all lowercase
Should use dashes (-) between words i.e. "class-name"
Should be descriptive



h1.alert {
font-size: 20px;
}

CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.
The CSS rule below will affect every HTML element on the page:

* {
  text-align: center;
  color: blue;
}

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.
To group selectors, separate each selector with a comma.

h1, h2, p {
  text-align: center;
  color: red;
}

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the style element, and starts with /* and ends with */

/* This is a single-line comment */
p {
  color: red;
}

CSS Colors.

CSS colors in full detail

Divs

Divs are used to group together several different HTML elements into one block.
A div creates a new block of elements, a block always starts on a new line and takes up the full width available in its container.
Grouping elements together in a div allows us to style that block as one unit.
HTML:

<div id="block-one">
    <h3>Welcome</h3>
    <p>Welcome to my web page.</p>
</div>
<div id="block-two">
    <ul>
        <li>Home</li>
        <li>About</li>
    </ul>
</div>

CSS:

#block-one {
    color: red;
}

#block-two {
    color: blue;
}

Spans

Spans are used to group together smaller chunks of HTML code in-line.
Spans do not create a new block, they are usually used to add style to a small chunk of HTML inside of a line (such as a line in a paragraph).
Example HTML:

HTML:

<p>This is a <span class="big">paragraph</span> of <span class="small">text</span></p>