Web Development Basics Quiz

Study Notes

Metadata Elements: specify character encoding (e.g., UTF-8) and describe page content.
Well-formed Markup: starts with a declaration of the HTML version, then uses elements like <html>, <head>, and <body> in a nested structure. Tags must be properly nested and closed. Special symbols (like < and &) need escaping.

Style Implementation: Styles can be inline (within elements), internal (within the <head>), or external (in a separate file). Inline styles have precedence over internal, and internal styles override external ones.
Rule Sets: CSS rules use selectors to target elements (classes, IDs, tags, pseudo-classes) and properties/values to change their appearance.

Content and Data Organization: HTML structure uses headings (
to
), paragraphs, line breaks, horizontal rules, lists (ordered and unordered), and tables to organize content.
HTML5 Semantic Elements: Elements like <header>, <footer>, <nav>, <article>, and <section> provide meaning and structure to content.
Navigation Elements: Use <a> tags for links (specify target="_blank" for new tabs), links with href="#top" or external links (e.g., "href="https://example.com"") for navigation, and image maps (<map> and <area>).
Forms: The <form> element collects user input. Input elements include <input>, <textarea>, and <select>. action specifies the URL for submission, and method can be GET or POST.

Images: The <img> element displays images. src specifies the image source, alt provides alternative text, and width and height set its dimensions.
Video and Audio: Use <video> and <audio> elements to embed multimedia content. src specifies the media file; <track> provides subtitles/captions.

Positioning Content: Properties like position (static, relative, absolute, fixed), margin, padding, border, float, and display control element layout.
Text Formatting: Properties such as font-family, font-size, font-weight, font-style, color, text-align, line-height, and text-decoration style text.
Backgrounds and Borders: Modify element appearance with border-width, border-style, border-color, background-color, and background-image properties.
Responsive Layouts: Use percentage-based units (%), pixels (px), relative units (em, rem), viewport-width (vw), or viewport-height (vh) units. Media queries (@media) adjust styling based on screen size. Use grids and breakpoints for responsive design.

Best Practices: Separate HTML and CSS, use comments, and utilize web-safe fonts to improve readability and maintain clarity.
Accessibility Principles: Provide alternative text for images (alt), ensure adequate color contrast and tab order for navigation.
Validation: Use HTML validators to check syntax, ensure proper nesting, and correct CSS cascading issues.