Лист за преговор: Web Development Fundamentals

📋 Course Outline

1. HTML Tags Structure
2. Common HTML Tags
3. HTML Image Tag and Attributes
4. HTML Link Tag and Attributes
5. JavaScript Integration
6. JavaScript Variables and Objects
7. JavaScript and HTML Interaction
8. CSS Styling Rules
9. CSS Properties and Selectors

📖 1. HTML Tags Structure

🔑 Key Concepts & Definitions

• HTML tags are the fundamental components used to create web pages, serving as the building blocks of content and structure.
• Angle brackets < > are used to enclose HTML tags, marking the beginning and end of each tag.
• Pairs of tags consist of an opening tag (e.g., <h1>) and a closing tag (e.g., </h1>), which together define the start and end of an element.
• Nesting refers to placing one HTML tag inside another, allowing complex and hierarchical webpage structures (e.g., <b><i>Text</i></b>).

📝 Essential Points

• Every HTML tag is wrapped in angle brackets <>, which distinguish tags from other content.
• Most HTML tags come in pairs: the opening tag initiates an element, and the closing tag, with a forward slash, signals its end.
• Proper nesting of tags is crucial for valid HTML structure and rendering; tags can be placed inside other tags to build layered content.
• Understanding the pairing and nesting of tags is essential for creating well-structured, accessible webpages.

💡 Key Takeaway

HTML tags are the core building blocks of web pages, defined by angle brackets and structured through paired and nested elements to organize content effectively.

📖 2. Common HTML Tags

🔑 Key Concepts & Definitions

• Headings (<h1> to <h6>): HTML tags used to define the hierarchical structure of headings on a webpage, where <h1> is the largest and <h6> is the smallest (source content).
• Paragraph (<p>): An HTML tag that creates a block of text, used to group related sentences or content into a paragraph format.
• Formatting tags (<b> and <i>): Tags used to apply specific styles to text; <b> makes text bold, and <i> makes text italic, providing visual emphasis (source content).
• Navigation (<nav>): An HTML tag that defines a section of the page intended for navigation links, helping organize menus or site structure visually and semantically.
• Nesting: The practice of placing HTML tags inside other tags to create complex structures, such as <b><i>Text</i></b>, allowing multiple styles or functions to be combined.

📝 Essential Points

• HTML tags are the fundamental building blocks of web pages, always wrapped in angle brackets <> (source content).
• Headings (<h1> to <h6>) establish the content hierarchy, aiding both readability and SEO.
• Paragraphs (<p>) group related text, making content easier to read and organize visually.
• Formatting tags like <b> and <i> provide visual emphasis without affecting document structure, with <b> for bold and <i> for italics.
• The <nav> tag semantically indicates navigation sections, improving accessibility and site organization.
• Nesting tags allows combining styles and functions, enhancing the flexibility of webpage design.

💡 Key Takeaway

HTML tags such as headings, paragraphs, formatting, and navigation are essential for structuring and emphasizing content on webpages, with nesting enabling complex and styled content arrangements.

📖 3. HTML Image Tag and Attributes

🔑 Key Concepts & Definitions

• <img> tag: An HTML element used to embed images into a webpage. It is a self-closing tag, meaning it does not require a separate closing tag.
• src attribute: Specifies the source or address of the image to be displayed. It is a required attribute for the <img> tag.
• width attribute: Defines the width of the image, often set as a percentage (%) to control size relative to the container.

📝 Essential Points

The <img> tag is used to add images to web pages without a closing tag, making it a self-closing element. The src attribute is essential because it points to the image's location, which can be a URL or a file path. The width attribute allows for responsive design by setting the image size as a percentage, such as <img width="100%" src="...">. Proper use of these attributes ensures images are correctly displayed and scaled across different devices and screen sizes.

💡 Key Takeaway

The <img> tag is a fundamental HTML element for inserting images, with the src attribute specifying the image location and the width attribute controlling its size, often as a percentage for responsiveness.

📖 4. HTML Link Tag and Attributes

🔑 Key Concepts & Definitions

• <a> tag (see source content): used to add hyperlinks to a webpage, allowing navigation to other pages or resources.
• href attribute (see source content): specifies the destination URL or file path for the hyperlink, wrapped in quotation marks.
• target="_blank" (see source content): an attribute that opens the linked page in a new browser tab or window, enhancing user experience.

📝 Essential Points

• The <a> tag creates hyperlinks, which are essential for connecting multiple pages within a website or linking to external resources.
• The href attribute is mandatory for <a> tags to define where the link points; without it, the link will not function.
• Using target="_blank" ensures that clicking the link opens the destination in a new tab, preventing users from navigating away from the current page.
• Multiple pages can be linked together using <a href="filename.html">, enabling the creation of multi-page websites.
• The <a> tag does not automatically create a new line; links can be inline or styled with CSS for layout purposes.

💡 Key Takeaway

The <a> tag, combined with the href and target attributes, is fundamental for creating navigable hyperlinks that connect web pages and resources efficiently.

📖 5. JavaScript Integration

🔑 Key Concepts & Definitions

• JavaScript: a programming language used to add interactivity to webpages (source content).
• <script> tag: an HTML element used to embed JavaScript code into a webpage (source content).
• Placement of <script>: the <script> tag is placed at the bottom of the <body> tag to ensure the webpage content loads before the script runs (source content).
• Functions: blocks of code designed to perform specific tasks, which can be invoked when needed (source content).

📝 Essential Points

• JavaScript enhances webpage interactivity by manipulating HTML elements and responding to user actions.
• To integrate JavaScript, code is written inside the <script> tag, which is typically placed at the bottom of the <body> to improve loading performance and avoid blocking page rendering (source content).
• Functions serve as reusable blocks of code that perform specific tasks, such as updating content or handling events (source content).
• Using the <script> tag correctly and defining functions allows developers to create dynamic and responsive web pages efficiently.

💡 Key Takeaway

JavaScript is embedded within webpages using the <script> tag placed at the bottom of the <body>, and functions are essential for organizing code to perform specific interactive tasks.

📖 6. JavaScript Variables and Objects

🔑 Key Concepts & Definitions

• Variables (see source content): Containers used in JavaScript to store and label data, allowing data to be referenced and manipulated throughout the code.

• Objects (see source content): Collections of variables in JavaScript that group related data together under a single entity, enabling organized data management and access.

📝 Essential Points

• Variables are fundamental for storing data in JavaScript, and they are labeled with identifiers for easy reference. They can hold different data types such as numbers, strings, or booleans.

• Objects serve as structured collections of variables, known as properties, which are key-value pairs. This organization simplifies managing complex data sets and enhances code readability.

• The source emphasizes that variables store and label individual pieces of data, while objects store multiple related variables collectively, facilitating more efficient data handling in programming.

💡 Key Takeaway

Variables in JavaScript are used to store and label individual data pieces, whereas objects organize multiple related variables into a single, manageable collection.

📖 7. JavaScript and HTML Interaction

🔑 Key Concepts & Definitions

• JavaScript can find HTML elements by id attribute: This means JavaScript can locate specific elements within an HTML document by referencing their unique id, allowing for targeted manipulation or interaction (see section 7).

• <button> tag creates clickable elements: The <button> HTML tag is used to add a button to a webpage that users can click to trigger actions or functions in JavaScript (see section 7).

• onclick attribute specifies JavaScript function to run on click: The onclick attribute is added to HTML elements like <button> to define which JavaScript function should execute when the element is clicked (see section 7).

📝 Essential Points

• JavaScript interacts with HTML by selecting elements through attributes like id, enabling dynamic content updates or responses to user actions.
• The <button> tag provides a user interface element that can be programmed to perform tasks when clicked, making webpages interactive.
• The onclick attribute links HTML elements to JavaScript functions, establishing event-driven behavior essential for user engagement.
• These mechanisms allow for seamless integration of JavaScript and HTML, creating responsive and interactive web pages.

💡 Key Takeaway

JavaScript enhances webpage interactivity by locating HTML elements via their id attribute, using <button> tags for clickable actions, and employing the onclick attribute to trigger JavaScript functions upon user clicks.

📖 8. CSS Styling Rules

🔑 Key Concepts & Definitions

• CSS rules (see section 9): Sets of instructions that add style to HTML elements, written inside the <style> tag.
• CSS selectors (see section 9): Patterns used to target specific HTML elements for styling; can target elements by type, class, or id.
• id attribute (see section 7): An HTML attribute used to uniquely identify an element, which can be targeted specifically in CSS using the #id selector.
• style declaration block (see section 9): The part of a CSS rule that contains the selector and the set of property-value pairs enclosed in curly braces {}.

📝 Essential Points

• CSS rules are written inside the <style> tag to define styles for HTML elements.
• CSS selectors can target elements by their type (e.g., p, h1) or by id using the #id syntax, where id is the value of the element’s id attribute.
• The structure of a CSS rule follows the pattern: selector { property: value; }.
• The #id selector allows precise styling of individual elements with a specific id attribute, enabling targeted customization.
• CSS properties such as color, font-size, text-align, font-family, and font-weight are used to modify the appearance of HTML elements.

💡 Key Takeaway

CSS rules, written inside the <style> tag, use selectors—including id selectors with #id—to target specific HTML elements and apply styles, allowing precise and flexible webpage design.

📖 9. CSS Properties and Selectors

🔑 Key Concepts & Definitions

• color: a CSS property that changes the text color of an element. It accepts color names, hex codes, or RGB values (see CSS styling rules).
• font-size: a CSS property that adjusts the size of the text within an element. It can be set using absolute units (e.g., px, em) or relative units (e.g., %).
• text-align: a CSS property that aligns the text horizontally within its container. It accepts values such as left, center, or right (see CSS styling rules).
• font-family: a CSS property that specifies the font type used for text. It can include multiple font options as fallback choices.
• font-style: a CSS property that makes text italic, providing an alternative to the <i> tag.
• font-weight: a CSS property that makes text bold and offers more precise control over font thickness than the <b> tag (see CSS styling rules).

📝 Essential Points

• CSS rules are written inside the <style> tag and target HTML elements via selectors, such as element names, classes, or IDs.
• The structure of a CSS rule follows: selector { property: value; }. For example, p { color: red; } changes paragraph text to red.
• The color property directly affects the text color, allowing customization of text appearance for better readability or emphasis.
• font-size enables control over text size, crucial for accessibility and visual hierarchy.
• text-align is used to position text within its container, influencing layout and design consistency.
• font-family allows the use of different fonts, enhancing aesthetic appeal and brand identity.
• font-style provides an easy way to italicize text, often used for emphasis or stylistic purposes.
• font-weight offers detailed control over boldness, surpassing the basic <b> tag, and is useful for emphasizing specific text segments.

💡 Key Takeaway

CSS properties like color, font-size, text-align, font-family, font-style, and font-weight are essential tools for styling text, enabling precise control over the appearance and layout of webpage content.

📅 Key Dates

(OMITTED: No significant dates provided in the content)

📊 Synthesis Tables

Aspect	HTML	JavaScript	CSS
Purpose	Structure and content organization	Interactivity and dynamic behavior	Styling and layout
Tags/Elements	<h1>-<h6>, <p>, <b>, <i>, <nav>, <img>, <a>	<script>, variables, objects	Selectors, properties, rules
Attributes	src, width, href, target	N/A	color, font, margin, padding
Nesting	Allowed for complex structures	Functions and objects nested within scripts	Nested selectors and rules
Authors & Concepts	Know W3C standards, semantic tags	Know ECMAScript basics, DOM manipulation	Know CSS specificity, cascade rules

⚠️ Common Pitfalls & Confusions

• Forgetting to properly close HTML tags, breaking document structure.
• Nesting tags improperly, causing rendering issues.
• Omitting the src attribute in <img> tags, resulting in broken images.
• Using <a> without href, making links non-functional.
• Placing <script> tags in the <head> without defer or async, blocking page load.
• Confusing JavaScript variables with constants; not declaring variables with var, let, or const.
• Overlooking the importance of object property notation in JavaScript.
• Misapplying CSS specificity, leading to unexpected style overrides.
• Forgetting to include units (px, %, em) in CSS property values.
• Not understanding the difference between inline and block elements in CSS.
• Failing to properly escape special characters in HTML or JavaScript strings.
• Ignoring accessibility considerations when structuring HTML and styling.

✅ Exam Checklist

• Know the structure of HTML tags, including the use of angle brackets and paired nesting, as explained by authors like W3C.
• Be able to identify and use common HTML tags such as headings (<h1>-<h6>), paragraphs (<p>), formatting tags (<b>, <i>), navigation (<nav>), images (<img>), and links (<a>), referencing source content.
• Understand how to embed images using the <img> tag with src and width attributes for responsiveness.
• Create hyperlinks with the <a> tag, using href for destination and target="_blank" for opening in new tabs.
• Integrate JavaScript into webpages using the <script> tag placed at the bottom of the <body> for optimal performance.
• Write and invoke functions in JavaScript to perform specific tasks, understanding their role in interactivity.
• Declare and use variables and objects in JavaScript, knowing the difference and their roles in data management.
• Understand how JavaScript interacts with HTML elements, including DOM manipulation.
• Master CSS styling rules, including the use of selectors, properties, and cascade principles.
• Apply CSS properties and selectors correctly, understanding specificity and inheritance.
• Know key authors and references such as the W3C standards for HTML and CSS, and ECMAScript documentation for JavaScript.
• Be aware of common pitfalls like improper nesting, missing attributes, or incorrect CSS specificity.
• Be able to troubleshoot and correct typical errors in HTML, JavaScript, and CSS code.