HTML Flashcards
What is HTML
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
HTML tags
… — 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.
What is a tag
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.
What is an element
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>.
The head structure element
… — 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
The title
… — 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.
The body
… — 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,
Headings
<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.
Paragraphs
<p> … </p>
— A paragraph
The p element lets you create paragraphs of text. Most browsers display paragraphs
Links
<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.
Image
<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>
Div: block level
<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.
Div uses
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
Div, classes, and id
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.
Span
<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
Inline and block level
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.
Types of list
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.
Unordered list
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>Ordered list
fuck
Description list
<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>What are Attributes
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.
The id Attribute
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.
The class Attribute
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:
Tables in HTML
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.
Table structure example
No.
Name
Age
1
Peter Parker
16
2
Clark Kent
34
Tables style
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.
Image style
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
Images on Another Server/Website
<img></img>
What are Responsive images
Responsive images will automatically adjust to fit the size of the screen.
Resize the browser window to see the responsive effect
Make HTML Image responsive with css
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
Bold text
Bold Text
#
To bold text, use the <strong> or <b> tags:</b></strong>
<strong>Bold Text Here</strong>
better strong</b></strong>
Italic text
Italic Text
#
To italicize text, use the <em> or <i> tags:</i></em>
<em>Italicized Text Here</em>
better em</i></em>
button
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
FilePath
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.
Comments
For defining HTML comments we use the tag. Browsers ignore this tag and do not show its content to the user.
