"How to HTML" : A Quick Guide

Introductory Note:

HTML uses tags as hidden keywords within a web page to define how your web browser must format and display content. Tags require two parts: an opening and a closing. For example, where  is the opening tag,  is the closing. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character. Interpret this as the "close" character. There are some tags that are an exception to this rule, and where a closing tag is not required. Using <img> to show images is an example of this exception.

Common Tags

<h?> heading </h?> is used for header text (h1 for largest | h6 for smallest).

 paragraph text  is used for basic text.

<li> list content </li> is used to add bullet points to your text to create a list.

 bold  is used to bold the text between the tags.

<img src="www.googleimages.com">

is used to show an image.

Section Divisions

  is used to break up content on a page. Think of it as ENTER on a keyboard.

<hr> is used to divide content by using basic a line.

```
 <hr style="opacity: .2;">
```
is reflective of our styling

Images

<img> tag attributes:

<img src="url" width="100%" height="100%">

src="url" URL of image (required)

width="100%" Image width (in pixels or %)

height="20px" Image height (in pixels or %)

Linking Tags

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

is used for a basic link.

<a> tag attributes:

href="url" location of page to link to

href="mailto:email" Link which initiates an email (dependent on user’s email client)

Advanced Implementations:

Iframe: An iframe is used to display a web page within a web page (in our case, a mobile app).

<iframe>"https://www.google.com" </iframe>

<div style="height:100vh"><iframe width="100%" height="100%" src="URL"> </iframe> </div>

is used to iframe web pages.

<iframe width="100%" height="350" src="https://www.youtube.com/embed/DSf-GRnSYKk?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

is used to iframe videos.

*** Please Note: when using YouTube videos, you MUST add ?rel=0 at the end of the web address. for example, rather than

"https://www.youtube.com/embed/tt1-Ohe9QQU"

it would be

"https://www.youtube.com/embed/tt1-Ohe9QQU?rel=0"

***

Articles in this section

Comments