Scribd
Upload
31 views

HTML For Beginner

The document defines various HTML tags for formatting text, adding images and links, grouping content, and more. It includes tags for headings, paragraphs, bold, italics, lists, links, buttons, images, and other common text elements. It also covers container tags like div, section, nav and article as well as lists, quotes, and other semantic tags.

Uploaded by

Zafor Khalid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

HTML For Beginner

The document defines various HTML tags for formatting text, adding images and links, grouping content, and more. It includes tags for headings, paragraphs, bold, italics, lists, links, buttons, images, and other common text elements. It also covers container tags like div, section, nav and article as well as lists, quotes, and other semantic tags.

Uploaded by

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

1. <p>...

</p> defines a paragraph


2. <b>...</b> to bold a string
3. <strong>...</strong> to bold a string with importance
4. <h1>...</h1> largest heading ( then h2, h3 ,h4, h5, h6)
5. <a href=”www.facebook.com”>...</a> anchor tag to link a website/webpage
6. <img src=” ” alt=” “> to add an image
7. <img src=” ” alt=” “></img> or <img src=” ” alt=” “/> is closed in xhtml
8. <ol type=”A”> ordered list (type=a or A or i or I or 1 etc)
<li> 1st element</li> list item
<li> 2nd element</li>
</ol>
9. <ul style=”list-style-type:square; ”> urdered list (type=disc or square or circle etc)
<li> 1st element</li> list item
<li> 2nd element</li>
</ul>
10. <div>
……..
………
</div>

As a "pure" container, the <div> element does not inherently


represent anything. Instead, it's used to group content so it can be
easily styled using the class or id attributes, marking a section of a
document as being written in a different language (using the lang
attribute), and so on.

11. <span style=”color: blue; font-size: small;”>...</span> is used to color a


specific part of a text.
12. <section>
<h1>...</h1>
…………….
<div>...</div>
</section>
Is used typically as a parent & contain heading tag. Most
important thing Is that, it contains same type of content or a group of
information of a definite content.

13. <button type=”button”>...</button> to creat a button


(type=button/submit/reset/menu)
14. <input type=”text” value=”this is a text”> to input text/color/date/time etc..
15. What is sementic tag?
16. <hr> is used to displayed a horizontal rule
17. <pre>...</pre> <pre> element defines preformatted text. (poem
problem)
18. For text formatting:
<b>...</b>
<strong>...</strong>
<i>...</i> for italic
<em>...</em> for emphasized text
<small>...</small> for small text
<sub>...</sub>
<sup>...</sup>
<del>...</del>
<ins>...</ins>
<mark>...</mark>
19. <blockquote cit=”www.wikipidea .com”>
……….
</blockquote>
defines a section that is quoted from another source.
Browsers usually indent blockquote elements.
20. <q>...</q> Browsers usually insert quotation marks around the
q element.
21. <abbr title="World Health Organization">WHO</abbr>
22. <address>
…………
</address>
The text in the <address> element usually renders in italic, and
browsers will always add a line break before and after the <address>
element.
23. <cite>The Scream</cite> used to define a creative work
24. <bdo dir=”rtl”>...</bdo> to change the direction text
25. <a href="https://www.w3schools.com/" target="_blank">Visit
W3Schools!</a>

_self - Default. Opens the document in the same window/tab as it


was clicked

_blank - Opens the document in a new window or tab

_parent - Opens the document in the parent frame

_top - Opens the document in the full body of the window

26. <a href= “ ”>

<img src= “ ” alt= “ ”> image as a link

</a>

27. <a href="mailto:[email protected]">Send email</a>


28. Button as a link:

<button
onclick=”document.location=’www.google.com’”>google</button>

29. <a href=” “ title=” “>...</a> specifies extra information about an


element.

30. <img src= “ ” alt= “ ” style= “ float:right;width:42px;height:42px;”>


float to right

31. <img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">

<area shape="rect" coords="34,44,270,350" alt="Computer"


href="computer.htm">

<area shape="rect" coords="290,172,333,250" alt="Phone"


href="phone.htm">

<area shape="circle" coords="337,300,44" alt="Coffee"


href="coffee.htm">

</map>

32. <div style=”background-image: url(‘...’); ”>

Or

div{

background-image: url(‘...’);

To add an background image

33. <dl>

<dt> coffee </dt>

<dd>cold or hot </dd>

</dl>

Description list.

34. CSS property float:left to display a list horizontally

35. <ol start= “50” >....</ol> to control starting


36. A <footer>...</footer> element typically contains:

● authorship information
● copyright information
● contact information
● sitemap
● back to top links
● related documents

37. <nav>

<a href= “” >...</a> used to navigate a set of link

<a href= “” >...</a>

</nav>

38. <figure>

<img src="pic_trulli.jpg" alt="Trulli">

<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>

</figure>

The <figure> tag specifies self-contained content, like illustrations,


diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The


<figcaption> element can be placed as the first or as the last child of a
<figure> element.

39. <details>

<summary> .... </summary>

<p>... </p>

</details>

40. <aricle>...</article> used for more specific even more than


<section>

You might also like