LAB 1.2 Flashcards
- The content, style, and interactive logic are separated into HTML, CSS, and JavaScript files, respectively.
- By styling HTML elements using CSS, you can simplify your HTML code.
- Instead of coding the appearance within each element, you apply CSS styles to all the elements on a page, regardless of the page complexity.
- You can link multiple HTML pages to a single CSS file, which can help simplify a consistent look and feel across your entire website.
Web Page
- Hypertext Mark-Up Language
- HTML is the standard markup language for creating Web pages.
- HTML describes the structure of a Web page.
- HTML consists of a series of elements.
- HTML elements tell the browser how to display the content.
HTML
- indicates this HTML document contains HTML5 code.
<!DOCTYPE html>
- This tag indicates metadata information that isn’t typically visible to the viewer unless they view the source code in their browser.
- This elements or tags provide descriptive information about the webpage.
<meta></meta>
- The set for UTF-8 may seem insignificant, but is crucial for establishing how computers interpret characters.
character set (charset)
- This element in your HTML code contains information about your website not visible inside the browser tab.
<head>
</head>
This appears at the top of a browser window, and is significant in many ways.
<title>
</title>
- The CSS is in the HTML page
internal CSS
- Having a separate CSS page from the HTML page
- Code tends to be easier to read when it’s concise and compartmentalized.
- You can use one or more style sheets to service multiple webpages.
- Rather than updating each HTML page with replicated CSS code, you can make changes to a single CSS file, and have those updates applied to all of the dependent web pages
external CSS
- attribute (used in the <p> element) can be used for styling one element
id
- attribute (used in the <li> element) is for styling all elements of the same class
class
- You can inspect a webpage by using this tool
- Right-click the web page and select Inspect
- Or F12 Key on the keyboard or Ctrl + Shift + I
Using developer tools
- shows you the document object model (DOM) as rendered in the browser. When debugging, it’s often important to see how the browser interprets your source code.
The Elements tab in developer tools
- Cascading Style Sheets let you specify how your page should look.
- The basic idea is to define what the style should be for the elements that you use within your HTML pages.
- While the HTML elements define your content, this styles define what this content looks like.
- multiple HTML pages can link to the same file. If you make a change to the , your styling is updated for each page.
- When you use an HTML file for your page content, and this file for styling, and a JavaScript file for interaction, it’s called separation of concerns.
CSS
-These are how you apply styles to HTML elements. CSS rules have a selector which is used to express which element, or elements, the styles should be applied to.
Each rule has:
- A selector. body and ul are the selectors of the two rules and are used to select which element(s) the styles apply to.
- An opening curly brace ({).
- A list of style declarations that determine what the selected element(s) should look like.
- A closing curly brace (}).
CSS rules
- ID and class enable you to apply styles to custom attribute names in your HTML.
- An ID is used to style one element, whereas classes can be used to style multiple elements.
Selectors
- is a programming language that helps you add interactivity to your web pages.
- For example, you can use this to define the behavior that happens when a user selects a button; for example, open a pop-up window.
- Using this language, you can add or remove content from a web page without reloading it.
JavaScript (or ECMAScript)
- This is a way to run a JavaScript function when an event happens on the page.
Event Handler