Scribd
Upload
15 views

HTML 01 Basics

This document provides an overview of basic HTML tags and their attributes. It includes tags for page structure like <html>, <head>, <body>; media tags like <img> and <a> for images and links; text formatting tags like <b> and <i>; lists tags like <ul> and <ol>; and table tags like <table>, <tr>, and <td>. It also provides notes on void elements, HTML validation, character codes, and color codes. Sample HTML code is given for a simple table.

Uploaded by

Ahmad Marwad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

HTML 01 Basics

This document provides an overview of basic HTML tags and their attributes. It includes tags for page structure like <html>, <head>, <body>; media tags like <img> and <a> for images and links; text formatting tags like <b> and <i>; lists tags like <ul> and <ol>; and table tags like <table>, <tr>, and <td>. It also provides notes on void elements, HTML validation, character codes, and color codes. Sample HTML code is given for a simple table.

Uploaded by

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

BASIC HTML CODING

HTML Tags
TAG ATTRIBUTES / PROPERTIES REMARKS

PAGE STRUCTURE

<!DOCTYPE html>

html lang=”en|ar” HTML Page

head Page Head

meta SEO, compatibility, form


factor settings

title Title of the Page

style Add CSS

link * href=”url” Link an External Source


rel=”stylesheet|icon”
type=”text/css|image/png”

script src=”url” Embed a Client-Side Script


type=”text/javascript”
defer

body bgcolor=”#aaccff|colorname” Page Body

<!-- -–> Comment

PAGE CONTENT

h1 to h6 align=”left|center|right|justify” Heading

p align=”left|center|right|justify” Paragraph

hr * Horizontal Rule

br * Line Break

&nbsp; Non-breaking Space

&lt; Full List: Less Than (<) and Greater


&gt; ● https://en.wikipedia.org/wiki/List_of_Unicode_c Than (>) symbols
&copy; haracters
&mdash; ● https://www.compart.com/en/unicode/html
● https://www.w3schools.com/html/html_entities
.asp
TEXT FORMATTING

b or strong Bold

i or em Italic / emphasize

u Underline

s Strikethrough

font face=”Arial” Font / Typeface


size=”12” (obsolete, in favor
color=”#336699|colorname” of CSS)

MEDIA & LINK

img * src=”../url” Image


alt=”Alternative Title” Alternative text (SEO, UX)
width=”1024|100%”
height=”123|25%”
title=”Hint”

a href=”#|URL|#sectionName” Anchor / Link


target=”_self|_blank” <a href=”#”>Dead
OR link</a>
name=”sectionName”

ORDERED / UNORDERED LISTS

ul type="disc|circle|square" Unordered List

ol type=”1|I|A|a|i” Ordered List

li List item

TABLES

table align=”center” Table


border=”1”
cellpadding=”4”
cellspacing=”0”
bgcolor=”gray”
width=”100%|1024px”
height=”75%”

tr height=”123” Row
valign=”top|middle|bottom”
bgcolor=”gray”

td colspan=”3” Data / Cell


rowspan=”2”
valign=”top|middle|bottom”
bgcolor=”red”

th Table Cell Heading


thead Table Header

tbody Body

tfoot

STRUCTURE / LAYOUT

span Inline Span (display: inline)

div Content Division

header Header

nav Navigation Links Group

main Main Content of the Body

section

footer Footer

OTHERS

sub Subscript

sup Superscript

NOTES

● * = Singleton tags / void elements


○ Trailing / may be removed (<br> instead of <br />)
● HTML Validator (https://validator.w3.org/)
● Search for HTML Character Codes for all other &; values
● Search for HTML Color Codes and Names for all other colors and #RRGGBB values
SAMPLES

Table

<table border="1" width="50%">


<tr>
<td>Number</td>
<td>Name</td>
<td>Price</td>
<td>Quantity</td>
</tr>
<tr>
<td>1.</td>
<td>S23</td>
<td>1.200</td>
<td>0</td>
</tr>
<tr>
<td>2.</td>
<td>iPhone</td>
<td>2.500</td>
<td>3</td>
</tr>
<tr>
<td>3.</td>
<td>Vivo</td>
<td>3.300</td>
<td>1</td>
</tr>
</table>

You might also like