HTML &
CSS
With HTML you can create your own Website.
By, Ms Venu
gn a Website ## Design a Website ## Design a Website ## Desig
#HTML “Try it Yourself” #
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
What is HTML?
✓ HTML stands for Hyper Text Markup Language
✓ standard markup language for creating Web
pages
→ HTML elements label pieces of content such as
"this is a heading", "this is a paragraph", "this is a
link", etc.
# HTML EXPLAINED #
01 <!DOCTYPE html>
02
03 Defines that this document is a HTML5 document
04
05 <html>
Root element of HTML page
<head>
Containts meta information about HTML page
<title>
Specify title for HTML page. (shown in page’s tab)
<body>
Defines document body which contain headings <h>, paragraph <p>,
img <img src>, hyperlinks <href>, table <table>, etc
HTML
Editors
For learning HTML, it is recommended to use a simple text editor
like Notepad (PC) or TextEdit (Mac) or notepad++.
In our learning, we are using notepad++
HTML
elements
An HTML element is defined by a start tag, some
content, and an end tag.
ELEMENT ## HTML ELEMENT ## HTML ELEMENT ## HTML ELEMENT ## H
<tagname>content goes here …</tagname>
The example of tagname are:
<h1>, <h2> …, <p>, <href>, <table>, etc
Never Skip the End Tag !!
<p>This is a paragraph
<p>This is a paragraph </p>
css
STYLES
Setting the style of an HTML element, can be done
with the style attribute.
L STYLE ## HTML STYLE ## HTML STYLE ## HTML STYLE ## HTML STY
# using css #
INLINE INTERNAL EXTERNAL
by using the style by using a <style> by using a <link>
attribute inside element in the element to link to
HTML elements <head> section an external CSS file
HTML
Formatting
Elements
HTML contains several elements for defining text
with a special meaning.
<!-- This is a comment -->
Note: Comments are not displayed by the browser, but they can help document
your HTML source code.
<b> - Bold text
<strong> - Important text
<i> - Italic text
<u> - Underline text
<mark> - Highlighting text
<sub> - Subscript text
<sup> - Superscript text
<q> - Quotation marks (“)
HTML Images
Syntax
Images can improve the design and the
appearance of a web page.
#image “Try it Yourself” #
The HTML <img> tag is used to embed an image in a web page.
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Image Element:
1. Height (%, px)
2. Width (%, px)
Example:
<img src=“eagle.png” alt=“eagle” width=“100%” height=“100%”>
HTML
TABLES
HTML tables allow web developers to arrange
data into rows and columns.
#table “Try it Yourself” #
1. The <table> tag defines an HTML table.
2. Each table row is defined with a <tr> tag
3. table header is defined with a <th> tag
4. Each table data/cell is defined with a <td> tag
HTML
LISTS
HTML lists allow web developers to group a set of
related items in lists.
# LISTS #
ordered unordered other
Represent as Represent as description of each
numerical or unordered term
alphabetical. (bulleted) list
#LIST “Try it Yourself” #
1. The <table> tag defines an HTML table.
2. Each table row is defined with a <tr> tag
3. table header is defined with a <th> tag
4. Each table data/cell is defined with a <td> tag
“There are three
responses to a piece
of design –
yes, no, and WOW!
Wow is the one to aim
for."
—MILTON GLASER
gEnASa ANeDwsESleINtGteERr ##LIFDeEsiAgSnAaDENeSwINsGlEetRt#erLIF##E ADSesiAgDnEaSINeGwEsRl#eLtIteFEr
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
HTML & CSS
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
HTML & CSS
- 1 - 19
Pages: