HTML

HTML is the standard markup language for Web pages. With HTML, you can create the structure of any website.

Elements

HTML documents consist of elements. There are several HTML elements like heading, lists, and links. HTML elements are defined by a start tag, some content, and an end tag just like so:

<tagname>some content</tagname>

Attributes

HTML attributes provide additional information about HTML elements. All HTML elements can have attributes. Attributes provide additional information about elements. They are always specified in the start tag and usually come in name/value pairs like: name="value"

Example: The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

<a href="https://www.hackathonsforschools.com/">Hackathons for Schools</a>

Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading and <h6> defines the least important heading.

Example:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs

The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and is usually a block of text.

Example:

<p>Hello, I’m Abdullah</p>

Images

The HTML <img> tag is used to embed an image in a web page. The <img> tag has two required attributes:

• src - Specifies the path to the image

• alt - Specifies an alternate text for the image

Example:

<img src="image_url" alt="alternate_text">

Links

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="destination_url">link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the link's destination. The link text is the part that will be visible to the reader - when they click on this text, they will be taken to the link.

Lists

There are two types of lists: unordered lists and ordered lists.

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. This will create a list with bullet points.

Example:

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. This will create a numbered list

Example:

<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

Forms

A HTML form is used to collect user input. The user input can then be sent to a server for processing. The HTML <form> element is used to create an HTML form for user input.

Example:

<form>
.

form elements

.
</form>

Form Elements

Form elements are different types of input elements like: text fields, check boxes, radio buttons, submit buttons, and more. The <input> element is the most important form element. An <input> element can be displayed in many ways, depending on the type attribute.

For Example:

<input type="text"> Displays a single-line text input field <input type="radio"> Displays a radio button (for selecting one of many choices) <input type="submit"> Displays a submit button (for submitting the form)

Example of a full form:

 <form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
  <input type=”submit”>
</form>

Block and Inline Elements

A block-level element always starts on a new line and takes up the full width available. The most famous block element in HTML is <div>. We usually use div elements to wrap sections of a document.

An inline element does not start on a new line and it only takes up as much width as necessary. The most famous inline element in HTML is <span> which is very similar to the div element but we use to wrap a small portions of text, images, etc.

To learn about more HTML, visit https://www.w3schools.com/html/default.asp