24
| Date post: | 23-Jan-2018 |
| Category: |
Technology |
| Upload: | afrasiyab-haider |
| View: | 117 times |
| Download: | 0 times |
Afrasiyab Haider16-ARID-2
HTML-BASICSIntroduction to Computing
HTML:•Hyper Text Markup Language
• HTML is a Language, as it has code-words and
syntax like any other language.
• Hyper-Text is the method by which you move
around on the web — by clicking on special text
called hyperlinks
• Markup is what HTML tags do to the text inside
them. They mark it as a certain type of text
INTRO TO HTML BASICS:
• HTML is a plain-text file that can be created using a text
editor like Notepad.
• When creating HTML files for the web, make sure you
save them as .html – or they won’t work.
SOFTWARE USE TO CREATE WEB-PAGE IN HTML
•Notepad
•Notepad++
HOW TO WRITE CODE
• Select Language
• Start Writing Code
TAGS OF HTML
Opening Tag <>
Closing Tag </>
Basic Tags used in HTML are
1. <!DOCTYPE HTML>
2. <HTML> Start Coding </HTML>
3. <head> Header </head>
4. <title> Title of Web-Page </title>
5. <body> Body of Web-Page </body>
6. <h1> Heading </h1> (after h6 the font size will be small)
TAGS OF HTML1. <p> Paragraph </p>
2. <br> Break row </br>
3. <strong>Makes text Bold</strong>
4. <b> Bold </b>
5. <i> Italic </i>
6. <mark> Highlighter </mark>
7. <img> Inserting Image </img>
8. <a href=“ ”> Insrting Hyper Link </a>
9. <div>To insert a section e.g. Insert text-box </div>
FIRST HTML PAGE
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Opening tag
Closing tag
An HTML element consists of an opening tag, a closing
tag and the content inside.
FIRST HTML PAGE
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
FIRST HTML PAGE
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>HTML body
EXAMPLE
HTML body
TAGS
• Hyperlink Tags
• Image Tags
• Text formatting tags
<a href="http://www.facebook.com/"
title=“Facebook">Link to Facebook</a>
<img src=“fb.jpg" alt="logo“> </img>
This text is <i>emphasized.</i>
<br>new line</br>
This one is <strong>more emphasized.</strong>
EXAMPLE
SIMPLE TAGS DEMO
<!DOCTYPE HTML><html><head>
<title>Simple Tags Demo</title></head><body><a href="http://www.facebook.com/" title=
“FB">This is a link of FB </a><br> </br><img src="C:\Users\Afrasiyab Haider\Desktop\fb.jpg" alt=“fb"> </img></body></html>
EXAMPLE
HEADING & PARAGRAPH TAG
Heading Tags (h1 – h6)
Paragraph Tags
<h1>Heading 1</h1><h2>Sub heading 2</h2><h3>Sub heading 3</h3>
<p>This is my first paragraph</p><p>This is my second paragraph</p>
EXAMPLE
HEADING & PARAGRAPH TAG
Heading Tags (h1 – h6) with Mark:
Paragraph Tags with Mark:
<h1><mark> Heading 1 </mark></h1><h2>Sub heading 2</h2><h3>Sub <mark> heading 3 </mark></h3>
<p>This is my <mark> first paragraph </mark></p>
<p><mark>This is my second paragraph</mark></p>
EXAMPLE
EXAMPLE OF DIV
<!DOCTYPE HTML><html>
<head><title>Headings and paragraphs</title></head><body><h1>Heading 1</h1><h2>Sub heading 2</h2><h3>Sub heading 3</h3>
<p>This is my first paragraph</p><p>This is my second paragraph</p>
<div style="background:skyblue">This is a div</div>
</body></html>
EXAMPLE
DO YOU HAVE ANY QUESTIONS
(RELEVANT ONLY)
![[Basic HTML/CSS] 2. html - list tags](https://static.documents.pub/doc/80x56/58ce75c41a28abdc578b67d9/basic-htmlcss-2-html-list-tags.jpg)
