HTML and CSS Flashcards
What is the primary use of HTML
Hypertext Markup Language - functions to describe the structure and meaning of webpages. Hypertext refers to documents that link to one another. Markup refers to its ability to describe webpages.
What is meant by HTML elements
These are used to create the structure of HTML documents. They can stand on their own or be nested in other elements.
How can we specify HTML elements using tags?
Elements are represented by using a pair of opening and closing tags. An opening tag has its name enclosed in <>, and a closing tag has its name enclosed in </>
What is the general structure of an HTML document?
The first line is a Document Type Declaration; <!doctype html> which tells the browser that this is an HTML document. We then have the <html> element which is the root element of the document. This element typically has a lang attribute to describe the language used by the majority of content on the page; <html lang='en'>.
All other elements are descendants of this element. Inside the <html> element, we have the elements <head> and <body>
The <head> element is used to specify meta-data bout the document and is also called the header of the document. It helps the browser and robots (e.g., search engine crawlers) understand what is on the page.
The body element contains the actual content which will be visible in the browser.
The html elements are not case sensitive, however it is recommended that we use lower case.
What are attributes and how do we specify values of attributes?
Additional information on top of tags that can be provided. Usually specified using the syntax of attribute-name=”attribute-value”, or attribute-name=’attribute-value’
- choose either single or double quotes, but be consistent throughout
On occasion you will see an attribute name with no associated value.
How do we nest multiple tags in an HTML document?
Opening and closing tags act a lot like parenthesis. if a tag has both an opening and closing tag, those must both appear at the right depth inside the nested elements.
What is meant by percent-encoding?
What are the different types of header elements?
H1, h2, h3, h4 , h5, h6
H1 is the most important or highest level heading. H6 is the lowest level heading that you might find deep in an article.
to ensure our web pages are accessible to screen readers (for the visually impaired) and search engine algorithms, headings h1 to h6 must be used hierarchically to denote new or sub-level content.
What are the uses of elements section, article, and div?
The div element is eg., <div>Content Here</div>, is used to divide content. It should be used as a last resort when no other element makes sense. If you want to divide content purely for stylistic reasons, this is the element to use. it conveys no meaning and just generically divides content.
what are the uses of the elements strong, b and em?
This family of elements is for adding meaning or style to specific text within a paragraph. This is different from the previous elements which generally served to group text.
<strong>
This element marks text that is more important. e.g., <strong> This is important </strong> It requires an opening and closing tag. The important thing about strong is that it signifies that text is important. Usually browsers will make it bold by default. But a browser could make it red, or make it underlined. By marking text with strong you are saying it is more important than the tea around it. Screen readers can also use this element to change voice inflection.</strong>
<b>
This element makes text stylistically different from other text. Look at me, I am <b>different</b>. This could be used to highlight keywords in a paragraph or conform to style guidelines set by some journal</b>
<em>
This element adds emphasis to a word. Often making it italic. It adds additional meaning to the word or phrased that is emphasized.</em>
<q>
This element is typically used to add double-quotation marks (English) to phrases and sentences. They work well with p and block quote tags.</q>
<span>
This element is typically used along with a new style or class (explored later) to change the way a specific piece of content looks.</span>
How can we create different types of lists in HTML?
<ul>
unordered lists contain list items with the <li> tag as children. Those list items can however contain most other html elements.
<ol>
Ordered lists are numbered or otherwise sequenced, unlike unordered lists.
<dl>
Definition lists use the dl tag and are similar but have pairs of terms and definitions. They contain <dt> tags for terms, and <dd> tags for definitions.
</dd></dt></dl></ol></li></ul>
How can we create tables in HTML?
The most structurally complex html element out there, the table element.
<table>
The table tag starts a table
<caption>
The caption tag can be used after the <table> tag to show a title and description at the top of the table
<thead>
This tag is used for the first row of the table
<tr>
This is a table row tag
<th>
This is to create an item in the head row
<tbody>
This is to create the body of the table
<td> this is to create an item in the body
</td></tbody></th></tr></thead></table></caption></table>
What is the difference between absolute and relative URLs?
An absolute URL is a complete URL to a resource including the protocol and the domain name.
- The URLs https://module2.cs290.com/index.html and https://module2.cs290.com/contacts.html are both absolute URLs
A relative URL points to a location relative to the file in while we use the URL
- Same Directory: We can specify a relative URL to a file in the same directory by using just the name of that file or by adding ./ before the name of the file. Using only the name of the file is the preferred syntax.
- Moving up the parent directories. We can specify relative URLs for files up the directory structure using ..
How can we create links using the anchor element?
The following anchor element links to the URL https://developer.mozilla.org/en-US/. The text A link to MDN. describes the link. When someone clicks on the text, they will be taken to the page https://developer.mozilla.org/en-US/
<a>A link to MDN.</a>
What is the use of the img element?
used to display images: <img></img>.
By default images are displayed in line so no new line is made for them.
What are some of the important units for specifying size in CSS?
Length Units
Frequently used in cSS to specify sizes and distances. There are 2 types of CSS distance units, absolute and relative. As the names imply, the absolute units are not relative to anything, whereas the relative units are relative to something else, e.g., the size of the parent element
Absolute units:
used for printing, rather than for displaying a webpage on the screen. Here are some commonly used absolute length units:
Relative units:
- Using relative units allows the size of an element or the distance between element to scale relative to other elements on the screen, For this reason, lengths for displaying a webpage on the screen are typically specified using relative units,. This is useful for layouts because if a user increases their font size to make a site easier to read, the size of elements using relative units will expand as well. On the other hand, if we were to use a fixed measurement and a user changed the font size, text might spill outside of the elements which are supposed to contain it.
The most commonly used relative units are em and rem.
- em is a relative unit based on the current font size of the parent element,. For example, 2em means two times the parent elements current font size.
- rem is a relative unit based on the current font size of the root element. For example, 2rem means two times the current font size of the root element.
What is the CSS box model?
CSS treats each HTML element as if it were contained in its own box. There are 2 types of boxes, block-level and inline corresponding to whether the element in the box is a block-level element or an inline element. Recall that elements such as h1, p, ul, li are block-level elements and start on a new line, whereas elements such as ing, b, I are inline elements and do not start a new line. Various CSS properties are available to control the appearance of the box surrounding an element. The most important properties to control the sizing of the box are shown in the following figure:
In the CSS Box Model, the element is contained in a rectangular box of a certain width and height. The box containing the element is separated from its border by padding on all four sides. After the padding comes the border of the box. Finally, a margin is defined on all four sides of the border specifying the distance between this box and its neighboring boxes.
