IS 201 Big Quiz: Web Development
<h1>, <h2>, <h3>
Headings with different levels of importance(size), from <h1> (most important) to <h6> (least important). Example: <h1>Page Title</h1>
<br>
Inserts a line break in the text. Example: Line 1 <br> Line 2
<link>
Links external resources like stylesheets or icons to the HTML document. Example: <link rel="stylesheet" href="styles.css">
On-page anchors
Links that navigate to a specific section within the same page using an ID. Example: <a href="#section1">Go to Section 1</a>
Directory navigation
Refers to navigating folders: " ../ " Moves up one level in the directory. Example: ../images/logo.png refers to an images folder in the parent directory.
<img>
Represents an image on a webpage. It uses attributes like src (the file path source of the image) and alt (alternative text for accessibility). Example: <img src="image.jpg" alt="Description">
font-style
Sets the font style (e.g., normal, italic, oblique). Example: font-style: italic;
color
Sets the text color (not background color) Example: color: red;
<title>
Sets the title displayed on the browser tab. Example: <title>My Webpage</title>
font-family
Specifies the font type (e.g., Arial, Times New Roman). Example: font-family: Arial, sans-serif;
class
The way we apply css style definitions to html elements. css: .highlight { background-color: yellow; color: black; } html: <div class="highlight">This is highlighted text.</div>
<ul>, <ol>, <li>
• <ul>: Creates an unordered list (bulleted). • <ol>: Creates an ordered list (numbered). • <li>: Represents each list item within <ul> or <ol>. Example: <ul> <li>Item 1</li> <li>Item 2</li> </ul>
text-align
Aligns text horizontally (e.g., left, center, right). Example: text-align: center;
Block vs Inline
Block: Takes up the full width available (e.g., <div>, <p>, headers). [Block 1] [Block 2] [Block 3] Inline: Takes up only as much width as its content, and allows other content to be on the same line as long as space if available (e.g., <img>, <span>, <a>). Inline 1, Inline 2, Inline 3
z-index
Controls the stacking order, or depth, of elements (front to back) Higher values are in front of lower ones. Example: z-index: 10;
font-weight
Controls the thickness of the font (e.g., normal, bold, lighter). Example: font-weight: bold; (or 800px)
<р>
Defines a paragraph of text. Example: <p>This is a paragraph.</p>
Box Model
Describes how elements are displayed. Content > Padding > Border > Margin
<iframe>
Embeds another HTML document (like a webpage or video) within the current page. Example: <iframe src="https://example.com" width="600" height="400"></iframe>
position (relative, absolute, fixed)
1. relative: Positioned relative to its normal position. (a sticky note on a whiteboard that you can nudge slightly without removing it) Used when an element needs a one-time, minor adjustment. 2. absolute: Positioned relative to the nearest positioned ancestor (a sticky note on a whiteboard that you can move slightly without removing it) These could be pop-up notifications or dropdown menus 3. fixed: Positioned relative to the viewport (does not move when scrolling, like a header. The sticky note is glued to the window, and it stays visible even when the whiteboard scrolls)
CSS
(Cascading Style Sheets) Used to style and layout web pages, controlling colors, fonts, spacing, and positioning all in one place so you don't have to update all your html when you want to make a style change. A "single source of truth"
HTML
(HyperText Markup Language) The standard language used to create the structure of web pages.
Comments
<!-- This is an HTML comment --> /* This is a CSS comment */
<head> vs <body>
<head>: Contains metadata and settings for the document (e.g., title, styles, scripts). <body>: Contains the main content visible to users.
<div>
A container element used to group content together for styling or layout purposes. Example: <div class="content">This is a section</div>
What is bootstrap and why use it?
A front-end framework (professional templates/themes) for developing responsive websites quickly. It provides pre-designed CSS classes and JavaScript components, making development faster and easier.
Custom Styles
Styles written specifically for a website in a <style> tag or external CSS file. Always starts with a " . " Example: .custom { background-color: lightblue; } You need to use the class attribute on an element in order to apply the custom styles
<a>
The "Anchor" tag. Defines a hyperlink, and is the primary and most versatile method for linking to other pages or resources. The href attribute specifies the URL. Example: <a href="https://example.com">Click here</a>
href
The href attribute is most commonly associated with the <a> (anchor) tag because it's used to specify the URL of the link destination. However, href is not exclusive to <a> and is used with other HTML elements as well. Examples: <a href="https://example.com">Visit Example</a> <link rel="stylesheet" href="styles.css">
