Scribd
Upload
18 views

HTML Notes

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It provides the structure and layout of a website through a variety of tags. Some key tags include: paragraph (<p>), headings (<h1> to <h6>), lists (<ul>, <ol>, <li>), images (<img>), links (<a>), and tables (<table>, <tr>, <td>, <th>). HTML documents are rendered and displayed in the browser according to these tags. CSS can be used to style and position elements on the page.

Uploaded by

Priyanshu
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views

HTML Notes

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It provides the structure and layout of a website through a variety of tags. Some key tags include: paragraph (<p>), headings (<h1> to <h6>), lists (<ul>, <ol>, <li>), images (<img>), links (<a>), and tables (<table>, <tr>, <td>, <th>). HTML documents are rendered and displayed in the browser according to these tags. CSS can be used to style and position elements on the page.

Uploaded by

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

HTML

1. HTML: hyper text markup language


language is a set of rules.
markup : we use tags(annotations) to show our content.
hypertext: linking of different web pages.

** examples of markup language ?? Is js and css is markup lang. ?


CSS is a style language and JS is a scripting language and none of them is markup
language as HTML .

2. HTML provides description of web pages. (means it will tell which is paragraph,
which is image etc.) Its a skeleton of a webpage.

3. First, we have a html document then a web browser which renders (load /
translate) it and show web page to us.

4. Tags: a keyword/ anotation that tells the browser how to render different
elements.

5. Tag: opening tag, closing tag, content , element


ex. <h1> Namaste </h1> (whole is called element)
OT CONTENT CT

6. <!-- COMMENT -->

7. Tags in HTML are case insensitive.( eg. html and HTML both are same.)

8. HTML doc. can be opened in 2 ways :


a) by text editor b) by browser

9. Text Element:
a) Block Element : <p>, <h1>, <ul>, <article>,<ol>,<li>
b) Inline element : <em> , <strong>, <a> ,<img>

10. Block Element: To divide whole webpage into different sections or blocks is
what
block elements do. (takes whole line)

11. Inline Element: used to differentiate specific part of text.(takes only space
which is necessary).

12. Heading tags: from h1 to h6 (h1 : highest , h6 : smallest)

13. <p> : To create a paragraph.

14. <br> : to insert line break. ( empty tag , self closing tag like, <hr> ,
<img> , < br> , < input> )

15. List: a) Ordered List. (numbering / order)


b) Unordered List
c) Description List.

The start attribute specifies the start value of the first list item in an ordered
list.
This value is always an integer, even when the numbering type is letters or romans.

E.g., to start counting list items from the letter "c" or the roman number "iii",
use start="3".
<ol type="A" start="10"> :: it will start from j letter.

*=> Description List: It encloses a list of groups of terms (dt-> term, dd-
>description)
<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>

<dt>Morgawr</dt>
<dd>A sea serpent.</dd>

<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>

16. Ordered List : <ol>


<li> Content </li>
</ol>

17. Unordered List: <ul>


<li> Content </li>
</ul>

18. <img src="source of image" alt= " message to be displayed when image will not
appear " height= "" width=" " />

19. Attributes is the property of a tag (ex. src is attribute and its path(url) is
value)
Provides additional information about element.

20. img is an inline element.

21. All html elements have attributes.

22. Class (.) : it can include different elements.

23. Id (# ) : it can only include unique element. (means 2 elements cant have the
same id) ,

24. Anchor tag used to create links <a href="https:// url " > content </a>

25. what happens when we close an empty tag? (ans. In case of vs code no error but
on other platforms it will throw an error ).
(some empty tags are : img, br, hr, area, meta)
(if u use <br></br> then VS Code will seen it as 2 <br> and leaves 2 line
breaks.)

26. <!Doctype html> : it tells the browser that its an html version 5 document.

27. <html lang ="en"> tells that the content of webpage is in english language.

28. Inside head tag meta data of HTML document, title is present .
like characterset , style, script, keywords , description.

29. Metadata: data about data. ( information about information )..

30. Body tag Contains actual content .


31. Meta Tag : infomation about webpage ( ex .Title of webpage)
(Data not to be displayed) helps in SEO (search engine optimisation)
used to specify :
a) character set
b) page description
c) keywords
d) Author
e) viewport

32. <meta character = "utf-8"> : character encoding.(standarad)

33.<meta name="Viewport " content ="device-width"> : used to specify space over


which webpage is to be displayed.

34. Fevicon : <link rel="icon" href="address of image"/> : to add a logo on


title.
(inside head tag)
(You can use any image you like as your favicon. You can also create your own
favicon on sites like https://favicon.io/)

35. Why headings only upto H6 are present not after it? (ans. 6 was presumably
chosen because it was assumed that nobody would need a sub-sub-sub-sub-sub-sub-
heading.
Very few documents come close to that level of subdivision
of sections. and its size decreases too much after h6).

36. Anchor tag helps to generate links. (<a>) ( inline element)

37. <a href="https://url " target="_blank"> (target attribute is used to open


the link on new web page.)

38. How to color a horizontal ruler ? (Ans. <hr style="height:2px;border-


width:0;color:gray;background-color:rgb(202, 17, 17)">)

39. <pre> : Tag used to give specific space as it was written in HTML code.

40. <p style="color : name ; background-color : name "> : this is an example of


inline CSS.

41. font-size: 10px => to change font size;

42. font-family: name => to describe the family or style of that font.

43. text-align : center (or left, right ) => to align text or content.

44. <b>, <i>, <u> : bold , italics , underline. (<strong> =>bold , <em> =>italics)

45. <small> : to make the text small.


<big> : To make the text big.

46. <del> : to make a strike line on text;

47. <mark> : text with background color (default is yellow, but can be changed by
using inline css).

48. <sup> : superscript

49. <sub> : subscript


Ques.(How can you give superscript and subscript for same element
?
Ans. : <table>
<tr>
<td rowspan='2' valign='center'>Sample Text</td>
<td>Sup</td>
</tr>
<tr>
<td>Sub</td>
</tr>
</table>
(Or we can also use CSS for this )

50. quotation: <q> .......</q> : used to insert quotes (" ....")

51. citation : (blockquote , q , cite , address , abbr )

=> blockquote : The HTML <blockquote> element defines a section that is


quoted from another source.
(ex. <blockquote cite="url"> and then the
information..

=> q : to insert quotes.

=> cite : The HTML <cite> tag defines the title of a creative work (e.g. a
book, a poem, a song, a movie, a painting, a sculpture, etc.).
ex. <cite>.......</cite> (shows in italics)

=>address: The HTML <address> tag defines the contact information for the
author/owner of a document or an article.
ex. <address> .. address of author </address>

=>abbr: The HTML <abbr> tag defines an abbreviation or an acronym, like


"HTML"
ex. <abbr title="Hyper Text Markup Language">HTML</abbr> , when you
hover over html then you will see its full form.

=>bdo: The HTML <bdo> tag is used to override the current text direction:
(bi-directional)
ex. <bdo dir="rtl">Hare Krishna</bdo>
This will be seen as opposite like , (anhsirK eraH).

52. Tables:
<table>
<tr> : Table row
<td> : Table column
</table>

53. <caption>: inside table tag , helps to give title to table;

54. <thead> : first row , use <th> inside thead so that it will be in bold

55. <tbody> : Middle rows

56. <tfoot></tfoot> : Last row

57. rowspan , colspan : table collapse/stretch with respect to row or column.


ex. <th colspan="2">.....</th> ; collapse 2 columns.
ex. <td rowspan="2>......</td>; collapse 2 rows.

(To insert border to table use style tag, give border to table, tr, td and use
border-collapse : collpase;

58. create a form using table tag with username and password
as entries.

59. <button> : To insert a button.

60. <label for = "username"> Username (Anything) </label>


<input type="text" id="username (same as that of for in label )">

61. <form action > ( form tags : used to design form )


</form>

62. <input type="submit" value="submit now( To be appeared)">

63. To write caption under the table use caption-side : bottom (changes in style
tag).

64. To style different columns in a group; use colgroup;


ex. <colgroup>
<col span="2" style="background-color:aqua">
</colgroup>
(here, default value of colspan is 1).
(Important : colgroup should be used inside table tag ).

65. There is no such property called as rowgroup.

66. Ex. how u can do , no change in color of 1st column and change color of
others ??
Ans. <colgroup>
<col span = "1"> // only selected and no change is done in this.
<col span = "2" style="color:yellow">
</colgroup>

(Important : colgroup should be used inside table tag ).

67. To hide a column in table : use visibility: collapse ( inside style tag)
(why to hide? ans. Some settings needs to be hidden from user and only
administrator
can change those settings).
(it is only for table (visibility: collapse ) but for other elements we can
use visibility : hidden)

68. To give caption for an image use :<figcaption> ( inside fig tag)
ex. <figure>
<img src="path.png">
<figcaption>Photograph by me</figcaption>
</figure>

69. Can u use image as a hyperlink?


Ans. Yes , <a href="https:google.com" target="_blank"><img src=" url
"></img></a>

70. <a href="tel:9548006840">Call Us</a> : it will call at this number

71. <a href="mailto:[email protected]"> Mail Me</a> : it will write mail


for this given mail address.

72. How to create bookmarks? ( Bookmarks means to reach out a particular section in
an HTML page )
Ans. use id for that particular section and then use href tag ex. <a
href="#idname">Move to contacts</a>
(only valid for id not for class **)

73. scroll-behavior: smooth => (style) to make the scrolling of webpage smooth.

74. <div> tag : division tag usually contains different elements,


: Its a block element.

75. <span> tag: same as div tag , but its a inline element.

76. display property: it is used to convert a block element into a inline element
or vice versa.
(ex. display: block , converts given element into block
element ;
( display: inline-block => converts given element into inline element
with block properties )
( only difference between them is that in inline block we can set
height and width but in case of inline we cannot channge it
also we can set margin and padding in inline block but not in inline.)

77. semantic tags: which provides complete description about elements present
inside
(ex . <article> : it means content inside is an article ,
<table> )

78. Non- Semantic tag: which do not provide any description about element present
inside .
(ex. div,span ).

79. <arcticle> : independent data (it can contain multiple <p> tag).

80. <section> : ex. header , biography, resources .

81. Some semantic tags : Header, Nav, Section, Article, Aside, Footer.
: These dont change the content visually, they just needed for good
practice.

82. section can be inside article tag or article can be inside section tag.

83. Difference between < h1> and header. (ans. <h1> is a heading, header is a
container and container can contain h1 tag.)

84. Can we use header inside footer? (ans. No, element header can't be a descendant
of footer ).

85. Can we use multiple header tags? (ans. yes, we can use multiple headers, but it
should not be descendant of other elements ).

86. <footer> => author, copyright, policies, copyright policies.

87. <nav> => navigation Links ( anchor tags is generally used inside it) .

88. <aside> => like adds, note, summary, indirectly connected content.
89. float : center do not work , (left and right works fine ).
(it helps to give position to div/ block).

90. iframe: inline element ; it helps to view another website.


<iframe src="url" frameborder="0" height="300" width="200" ></iframe>

91. <label for="name">Name</label>


<input type="text" name="anything" id="name" placeholder="Enter your name">

(Important : required , in forms : When present,


it specifies that an input field must be filled out before
submitting the form)

92. ' for ' attribute of label stag should be same as that of id.

93. Select : to select value from given options :


<select name="gender" id="gen">
<option value="male">Male</option>
<option value="fm">Female</option>
</select>
(whatever the content of value in option will be saved in backend).

94. Radio : to select only one value by using radio buttons.


<label for="c1">1
<input type="radio" name="class" id="c1">
</label>
<label for="c2">2
<input type="radio" name="class" id="c2">
</label>

=> For selecting only one value from radio buttons name should be same
for all.

95. Textarea: To write review message.


<textarea name="message" id="mssg" cols="20" rows="10" ></textarea>

/// character and symbols ( HTML entities )

=> <p>This is another Paragraph<p></p> => (code) => <p>This is another Paragraph
&lt;p&gt; </p> (&lt; -> lower tag , &gt;-> greater tag)

=> for other symbols search HTML entities .

96. How to put video and audio on a webpage?


Ans. <video width="320" height="240" controls="controls"> ( you can also
use autoplay to start video automatically)
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

97. To add icons in html page like icon of insta, whatsapp etc.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css">
and then use fab fa-twitter etc.
98. To use external fonts : @import url('https://fonts.googleapis.com/css2?
family=Pacifico&display=swap');
and now can use that particular type of font.

For more reference : mdnrefence.com

You might also like