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 is the link element and how we can use it to specify a relationship between a document and an external recourse?
The link element is another way to use URLs in HTML documents. IT specifies a relationship between a document and an external resource. The href attribute is used to specify the URL of the eternal resource. The real attribute, which stands for “relationship”, is used to specify the relationship between the external resource and the HTML document. Two commonly used values of red are stylesheet to link stylesheets and icon to link a websites icon
What is the script element and its use?
We add javascript code to an html document using the script element. We can either simply embed javascript code inside an opening and a closing
tag or use the script tag to refer to a javascript file using the src attribute to specify the URL for that file.
What is the need for CSS?
Css is used for styling HTML elements. The key idea is to separate content from style. HTML specifies the semantic structure and content of a web page. Each HTML element has a default style we can override with Css. CSS treats each HTML element as if it were contained inside its own box. Using CSS rules, we can specify how that box and element inside the box should be styled
What is the general form of a CSS rule?
A simple CSS rule starts with a selector which selects the HTML elements to which the rule applies. This is followed by one or more declarations placed inside a pair of curly braces. Each declaration is a property value pair, specifying a property of the element and then the value we want to set for that property. A colon: separates a property and its value, while different declarations are separated by a semi-colon;
h1 {
color: blue; font-size: 25pt;
What are CSS selectors, and what are they used for?
selectors select the HTML elements to which the rule applies.
What are some types of basic CSS selectors?
- is the universal selector which matches all elements
Type selectors match elements based on the element type, i.e., the tag name.
h1 {
color: red;
font-size: 25pt;
}
The ID selector selects the single element with a matching ID and is of the form #id
Example: we select an element with id vivid by using the selector #vvip
#vvip{
font-weight: bold;
}
The class selector selects all elements in which the attribute class has that value. The syntax is .class, i.e., we add a . before the value of the class.
Example: The selector .navigation will apply to all elements with the class attribute of navigation
.navigation {
font-size: 16pt;
}
When should we use classes vs. IDs as selectors in our rules?
- In a single page, an ID can be used only by one element, whereas a class can be reused by multiple elements.
- Thus, IDs are good for anchoring and specifying unique blocks, whereas classes are more about design properties that get used again and again.
Grouping selectors:
It is possible to specify rules that apply to multiple selectors. This is done by specifying multiple selectors separated by commas. her is an example rule that selects paragraphs and list elements and sets their color to blue:
p, li {
color: blue;
}
What are location-based CSS selectors?
Descendant Selector selects all elements of type x which are a descendant of type y with the syntax y x. So nav ul will apply a style to all ul elements which are the descendants of a nav element.
Child Selector selects all elements of type x which are direct children of type y. The syntax is y>x. So nav>ul would select those ul elements whose direct parent is a nav element. But unlike the descendant selector it would not target a ul within a div within a nav because the ul is a child of the divine, not the nav.
Adjacent Sibling selects elements of type x which have the same parent element and appear immediately after an element of type y,. The syntax is y+x. So h1+p would select a p element if it directly follows an h1 element. An example use of this would be in an HTML document for a news article where we wanted the first paragraph after the news article’s headline to always look different than the rest of the paragraphs in that article.
General Sibling selects all siblings, and not only the one sibling that immediate follows. The syntax here is y~x. So h1~p would target all paragraphs on the same level as the h1 elements, not just the one immediately after it.
Complex Selectors
We can combine selectors to form more complex selectors. A common use is combining a type and a class to specify a selector that applies to tags with that type but only if they have that particular class. The syntax for this is tag.class
What are pseudo-selectors?
Selectors that are based on the state of an element. We can specify pseudo selectors using a selector followed by a pseudo-class where a pseudo-class is a keyword preceded by a :. Here is the general syntax:
selector:psuedo-class {
property: value:
}
Common use cases for pseudo-classes are changing the style of an element when the mouse hovers over it, and displaying visited links differently from links that have not been visited
/* hover over a paragraph */
p:hover {
color: white;
background: black;
}
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: orange;
}
What are different ways of adding styling rules to an HTML document, and what are the pros and cons of these different ways?
External CSS using separate stylesheet
- We put the style rules in a file with .css extension and link the stylesheet to the document using the link element.
- Using this approach the same styles can be easily shared across multiple pages in a website.
- This also makes it easy to make a change in one stylesheet and update the style across many pages.
- The ease of sharing styles and the clean separation between content and style make this the preferred approach for specifying styling information
Internal CSS using the style element:
- This allows us to specify styles that are specific to that HTML page
Inline CSS using the style attribute of an element
- this approach is used to apply a style to a single element
- To apply the same style to multiple elements, this approach requires repeating the style declaration in all these elements.
- The potential for repetition of styling information and the mixing of content and styling information make this the least recommended approach for specifying styling information.
