HTML

Question 1

What is HTML

Answer 1

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript

Question 2

HTML tags

Answer 2

… — The root element
All web pages start with the html element. It’s also called the root element because it’s at the root of the tree of elements that make up a web page.

Question 3

What is a tag

Answer 3

An HTML tag is a special word or letter surrounded by angle brackets, < and >. You use tags to create HTML elements, such as paragraphs or links.

Question 4

What is an element

Answer 4

Many elements have an opening tag and a closing tag — for example, a p (paragraph) element has a <p> tag, followed by the paragraph text, followed by a closing </p> tag.

Some elements don’t have a closing tag. These are called empty elements. For example, the br element for inserting line breaks is simply written <br></br>.

Question 5

The head structure element

Answer 5

… — The document head
The head element contains information about the web page, as opposed to the web page content itself. There are many elements that you can put inside the head element, such as:

title (described below)
link, which you can use to add style sheets and favicons to your page
meta, for specifying things like character sets, page descriptions, and keywords for search engines
script, for adding JavaScript code to the page

Question 6

The title

Answer 6

… — The page title
The title element contains the title of the page. The title is displayed in the browser’s title bar (the bar at the top of the browser window), as well as in bookmarks, search engine results, and many other places.

Question 7

The body

Answer 7

… — The page’s content
The body element appears after the head element in the page. It should contain all the content of your web page: text, images, and so on. All web pages have 1 single body element,

Question 8

Headings

Answer 8

<h1> … </h1>

— A section heading
Headings let you break up your page content into readable chunks. They work much like headings and subheadings in a book or a report.

HTML actually supports 6 heading elements: h1, h2, h3, h4, h5, and h6.

Question 9

Paragraphs

Answer 9

<p> … </p>

— A paragraph

The p element lets you create paragraphs of text. Most browsers display paragraphs

Question 10

Links

Answer 10

<a> … </a> — A link
One of the most important elements in a web page, the a element lets you create links to other content. The content can be either on your own site or on another site.

Question 11

Image

Answer 11

<img></img> — An image
The img element lets you insert images into your web pages. To insert an image, you first upload the image to your web server, then use an <img></img> tag to reference the uploaded image filename. Here’s an example:

<img></img>

Question 12

Div: block level

Answer 12

<div> … </div>

— A block-level container for content

The div element is a generic container that you can use to add more structure to your page content.

Question 13

Div uses

Answer 13

you might group several paragraphs or headings that serve a similar purpose together inside a div element. Typically, div elements are used for things like:

Page headers and footers
Columns of content and sidebars
Highlighted boxes within the text flow
Areas of the page with a specific purpose, such as ad spots
Image galleries

Question 14

Div, classes, and id

Answer 14

By adding class and/or id attributes to your div elements, you can then use CSS to style and position the divs. This is the basis for creating CSS-based page layouts.

Question 15

Span

Answer 15

<span> … </span> — An inline container for content
The span element is similar to div in that it’s used to add structure to your content. The difference is that div is a block-level element, while span is an inline element

Question 16

Inline and block level

Answer 16

Block-level elements, such as div, h1, and p, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line.
Inline elements, such as span, a, and img, are designed to hold smaller pieces of content — such as a few words or a sentence — within a larger block of content. Adding an inline element doesn’t cause a new line to be created. Block-level elements can contain inline elements, but inline elements can’t contain block-level elements.
As with a div, you often add a class and/or id attribute to a span so that you can style it using CSS.

Question 17

Types of list

Answer 17

Unordered list — Used to create a list of related items, in no particular order.
Ordered list — Used to create a list of related items, in a specific order.
Description list — Used to create a list of terms and their descriptions.

Question 18

Unordered list

Answer 18

<ul>
    <li>Chocolate Cake</li>
    <li>Black Forest Cake</li>
    <li>Pineapple Cake</li>
</ul>

Question 19

Ordered list

Answer 19

fuck

Question 20

Description list

Answer 20

<dl>
    <dt>Bread</dt>
    <dd>A baked food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>

Question 21

What are Attributes

Answer 21

Attributes define additional characteristics or properties of the element such as width and height of an image. Attributes are always specified in the start tag (or opening tag) and usually consists of name/value pairs like name=”value”. Attribute values should always be enclosed in quotation marks.

For instance, an <img></img> tag must contain a src and alt attributes.

Question 22

The id Attribute

Answer 22

The id attribute is used to give a unique name or identifier to an element within a document. This makes it easier to select the element using CSS or JavaScript.

Question 23

The class Attribute

Answer 23

Like id attribute, the class attribute is also used to identify elements. But unlike id, the class attribute does not have to be unique in the document. This means you can apply the same class to multiple elements in a document, as shown in the following example:

Question 24

Tables in HTML

Answer 24

You can create a table using the element. Inside the element, you can use the elements to create rows, and to create columns inside a row you can use the elements. You can also define a cell as a header for a group of table cells using the element.

Question 25

Table structure example

Answer 25

No.
Name
Age

    1
    Peter Parker
    16

    2
    Clark Kent
    34

Question 26

Tables style

Answer 26

Tables do not have any borders by default. You can use the CSS border property to add borders to the tables. Also, table cells are sized just large enough to fit the contents by default. To add more space around the content in the table cells you can use the CSS padding property.

By default, borders around the table and their cells are separated from each other. But you can collapse them into one by using the border-collapse property on the element.

Also, text inside the elements are displayed in bold font, aligned horizontally center in the cell by default. To change the default alignment you can use the CSS text-align property.

Question 27

Image style

Answer 27

You can use the style attribute to specify the width and height of an image.

<img></img>

Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
Use the CSS float property to let the image float to the left or to the right

Question 28

Images on Another Server/Website

Answer 28

<img></img>

Question 29

What are Responsive images

Answer 29

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the responsive effect

Question 30

Make HTML Image responsive with css

Answer 30

Add HTML:
<img></img>

.responsive {
width: 100%;
height: auto;
}

If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100% and many other options

Question 31

Bold text

Answer 31

Bold Text
#
To bold text, use the <strong> or <b> tags:</b></strong>

<strong>Bold Text Here</strong>

better strong</b></strong>

Question 32

Italic text

Answer 32

Italic Text
#
To italicize text, use the <em> or <i> tags:</i></em>

<em>Italicized Text Here</em>

better em</i></em>

Question 33

button

Answer 33

The tag is used to create clickable buttons on the web page.

You can apply CSS styles to the tag to change the appearance of the button, its size, color, text font, and so on.

Add to the recycle bin

The tag doesn’t have required attributes; however, we recommend always use the type=”button” attribute,

Title of the document

<h1>Here will be our button</h1>
Click

Question 34

FilePath

Answer 34

A file path is used when we link to such external files like:

web pages
images
JavaScripts
style sheets

An absolute file path is the URL to access an internet file.
A relative file path mentions a file that is relative to the current page.

Question 35

Comments

Answer 35

For defining HTML comments we use the tag. Browsers ignore this tag and do not show its content to the user.