You are on page 1of 9

Notepad ++ Tutorials

HTML
Nzb Publications

Table of Contents
INTRODUCTION TO HTML Chapter 1 4

HTML Basics: 5 1-Headings 2-Paragraphs 3-Font Types 4-Images 5-Breaks 6-Horizontal Lines 7-Custom Text 8-Links Chapter 2 HTML Elements: 1-The <Html> Element 2-The <Body> Element 3-The <Head> Element 4-The <Title> Element 5-The <P> element Chapter 3 Advanced HTML: 1-HTML Document Starting 2-Columns in Html 3-Cool Fonts 4-Marquee Text 5-Tables 9 8

INTRODUCTION TO HTML
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags
3

The purpose of the tags are to describe page content HTML Tags? HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like < > and </ > The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags HTML Elements "HTML tags" and "HTML elements" are often used to describe the same thing. But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags

Chapter 1 : HTML Basics

1- Headings: HTML Headings Are Defined With The <H1> To <H6> Tags. Ex: <h1> This is a heading</h1> 2- Paragraphs: HTML Paragraphs Are Defined With The <P> Tag. Ex: <p> This is a Paragraph</p>
4

3- Font Types: HTML Fonts Are Defined With The These Tags. Ex: <b>Defines bold text</b> <big>Defines big text </big> <em>Defines emphasized text </em> <i>Defines italic text </i> <small>Defines small text </small> <strong>Defines strong text </strong> <sub>Defines subscripted text </sub> <sup>Defines superscripted text </sup> <ins>Defines Underlined text </ins> 4- Images: HTML Images Are Defined With The <Img> Tag Ex: <img src=123.png" width=x" height=x" /> 5- Breaks: Html Breaks Are Defined With <Br> Tag. Ex: First Line <br> Second Line 6- Custom Text: Html Font Is Defined With These Tags. Ex: Change Text Face: font-family:New Times Roman"; Ex: Change Text Size:
5

font-size:10px; Ex: Change Text Color: color:orange; Ex: Change Text Alignment: text-align:center; Ex: Drop Shadows On Text 1- <p style="font-size:18px;color:orange;text-shadow:1px 1px 1px #666;">Text Here</p> 2- <p style="font-size:18px;color:orange;text-shadow:1px 1px 1px #000;"> Text Here</p> 3- <p style="font-size:18px;text-shadow:4px 4px 4px #666;>Text Here</p> 4- <p style="font-size:18px;color:orange;text-shadow:4px 4px 8px #666;"Text Here</p> 5- <p style="font-size:18px;color:#fff;text-shadow:1px 1px 8px #000;"> Text Here</p> 7- Links: HTML Links Are Defined With The <A> Tag. Ex: <a href="http://www.google.com">This is a Text link</a> Ex: <img src=Abc.png" width=20px" height=20px" onClick="window.location.href='http://google.com'">This Is A Picture Link

Chapter 2 : HTML Elements

1- The <Html> Element: Used To Make A HTML Document <Html> This Is Inside The Webpage </Html> 2- The <Body> Element: Used For The Webpages Body (Text Or Images) <Body> Body Text </Body> 3- The <Head> Element: Used To Add A Heading <Head> Heading </Head> 4- The <Title> Element: Used To Add A Tab Name <Title> Heading </Title>

5- The <P> Element: Used To Make A Paragraph <P> Paragraph </P>

Chapter 3 : Advanced HTML

1- Html Document Starting: Used To Describe What Kind Of Document It Is <!DOCTYPE html> <Html> This Is Inside The Webpage </Html> 2- Columns In Html: Used To Write Text In A Column <p style="text-indent:18px;width:200px;">Your Colum Line Here</p> 3- Cool Text: 1-<p style="text-decoration:line-through;">Text with a line through the middle</p> 2-<p style="text-decoration:overline;">Text with an overline</p> 3-<p style="text-decoration:blink;">Blinking text (Works In Mozilla)</p> 4-<p>Html<span style="background-color:yellow;">Highlited</span> example</p> 3-Marquee Text:
8

1- <marquee behavior="scroll" direction="left>Text... going LEFT!</marquee> 2- <marquee behavior="scroll" direction="up>Text... going up!</marquee> 3- <marquee behavior="scroll" direction="left"> <img src="http://www.html.am/images/html-codes/marquees/fishswimming.gif" width="94" height="88" alt="Swimming fish" /> </marquee> 4-Tables: <table border="1"> <tr><th>Table Header</th><th>Table Header</th> </tr><tr><td>Table cell 1</td><td>Table cell 2</td></tr><tr> <td>Table cell 3</td><td>Table cell 4</td></tr></table>

You might also like