Scribd
Upload
16 views

HTML Basics

Lol

Uploaded by

steephensitumeang92
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

HTML Basics

Lol

Uploaded by

steephensitumeang92
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

LEARN HTML FOR BEGINNERS BY SULEY YUSUF

YOU CAN GET THIS EZ HTML BASIC FROM THIS SITE


https://selar.co/vlwg?affiliate=b9on
What is HTML?
● HTML is the standard markup language for creating Web pages.
● HTML stands for Hyper Text Markup Language
● HTML describes the structure of Web pages using markup
● HTML elements are the building blocks of HTML pages
● HTML elements are represented by tags
● HTML tags label pieces of content such as "heading", "paragraph", "table",...
● Browsers do not display the HTML tags, but use them to render the content
of the page
An Example
A paragraph is your content

Putting your content into an HTML tag to make it look like a paragraph is structure

<p>This is the content</p>


HTML Elements and Tags
An element is an individual component of HTML

- paragraph, image, header,...


- an element name indicates its purpose: p for paragraph

A tag marks the beginning and the end of an HTML element

- Opening tag and Closing Tag

<tagname>Stuff in the middle</tagname>


HTML Tag Breakdown

Taken from http://girldevelopit.github.io/gdi-featured-html-css-intro/class1.html#/16


Container Element

- An element that can contain other elements or content


- A paragraph (<p>content</p>) contains

text Stand Alone Element

- An element that cannot contain anything else


- <br/>, <img/>
Attribute

- Provides additional information about the HTML element


- Class, ID, language, style, identity, source
- Placed inside an opening tag, before the right angle bracket.

Value

- Value is the value assigned to a given attribute.


- Values must be contained inside quotation marks.

<img src="my_picture.jpg" />


HTML Page Structure
<!DOCTYPE html>
<html>

</html>
<!DOCTYPE>
The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.

It must only appear once, at the top of the page (before any HTML

tags). The <!DoCtYpE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is <!DOCTYPE html>


<html>,<head>,<body>
After <!doctype>, the page content must be contained between <html> tags.

The head contains the title of the page & meta information about the page. Meta
information is not visible to the user, but has many purposes, like providing
information to search engines.

The body contains the actual content of the page. Everything that is contained in
the body is visible to the user. (Some Exceptions!)
Let's create our first HTML page
open a new file in your text editor and copy this code in it:
<!DOCTYPE html>
<html>
<head>
<title>Title of the page </title>
</head>
<body>
The page content here.
</body>
</html>

save the document as myfirstpage.html and open it with a browser.


Nesting
All elements "nest" inside one another

Nesting is what happens when you put tags inside other containing tags.

For example, you would put the <p> inside of the <body> tags. The <p> is now
nested inside the <body>
<body>
<p>The paragraph goes here.</p>
</body>

Whichever element OPENS first CLOSES last


Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading

<h1>This is heading 1</h1>

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Paragraphs
HTML paragraphs are defined with the <p> tag:

<p>This is a paragraph</p> <p>Paragraph 2</p>


The Poem Problem and Line Breaks
This poem will display in a single line:
<p> The browser will remove
any extra spaces and extra
My Bonnie lies over the
ocean. My Bonnie lies over
the sea. lines when the page is
My Bonnie lies over the
displayed
ocean. Oh, bring back my
Bonnie to me.
</p>
The <br> element defines a line break without starting a new paragraph.
<p>
My Bonnie lies over the ocean.
<br> My Bonnie lies over the
sea. <br> My Bonnie lies over
the ocean. <br> Oh, bring back
my Bonnie to me.
</p>
Preformatted Text
The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually


Courier), and it preserves both spaces and line breaks.
<pre> This will be shown
correctly with line breaks
My Bonnie lies over the
ocean. My Bonnie lies over
the sea. preserved.
My Bonnie lies over the
ocean. Oh, bring back my
Bonnie to me.
</pre>
<p>
Here is a paragraph with <em>emphasized</em> text and <strong>important</strong> text.
</p>

<p>
Here is another paragraph with <i>Italic</i> text and <b>Bold</b> text.
</p>

Here is a paragraph with Emphasized text and


Important
text.
Here is another paragraph with Italic text and Bold
text.
<p>Here is a <mark>highlighted</mark> text and this is <small>smaller</small> text.</p>

Here is a Highlighted text and this is smaller text.


<p>Here is <del>some deleted</del> text and this is <ins>some inserted</ins> text.</p>

Here is some deleted text and this is some inserted


text.
<p>This is <sup>superscripted</sup> text and this is <sub>subscripted</sub> text.</p>

Here is superscripted text and this is subscripted text.


Character Codes
Many mathematical, technical, and currency
symbols, are not present on a normal keyboard.

To add such symbols to an HTML page, you can


use an HTML entity name or code.

One character that I use most is &nbsp;

See here for a complete list


Links
HTML links are defined with the <a> tag

The link's destination is specified in the href attribute.

target attribute specifies where to open the linked document(_self,_blank,...)

<a href="http://www.google.com" target="_blank">This is a link to Google!</a>

This is a link to Google!


Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are
provided as attributes.
<img src="fsu-logo.jpg" alt="FSU Logo" width="104" height="142">
Relative vs. Absolute paths for links & Images
Relative paths change depending upon the page the link is on

- Links within the same directory need no path information. "filename.jpg"


- Subdirectories are listed without preceding slashes. "img/filename.jpg"

Absolute paths refer to a specific location of a file, including the domain

- Typically used when pointing to a link that is not within your own domain.
- http://one.fsu.edu/alumni/image/community/clubs/FSU-Seal-full-color.jpg
Unordered list (bullets) <ul>

● List Item
<li>List Item</li>
<li>Another List Item</li>
● Another List Item </ul>

Ordered list <ol>


<li>List Item</li>
(sequence) <li>Another List Item</li>
</ol>

1. List Item
2. Another List Item
Lists are used everywhere and
can be customized to look as
you want
Tables are a way to represent <table>
complex information in a grid format. <tr>
<th>Head</th>
<th>Head</th>

Tables are made up of rows and


</tr>
<tr>
columns. <td>Data</td>
<td>Data</td>
</tr>
</table>
Tables can be styled with CSS to add
zebra striping or to highlight important
rows/columns.

Extra functionality can be added to


tables like filtering or sorting rows and
columns.
Comments
You can add comments to your code that will not be seen by the browser, but only
visible when viewing the code.

Comments can be used to:

- organize your code into sections


- 'comment out' large chunks of code to hide it from the browser.

<!-- Beginning of header -->


<div id="header">Header Content </div>
<!-- End of header -->

You might also like