Skip to content

Commit 472664e

Browse files
images finalization
1 parent e01fe1e commit 472664e

20 files changed

+8
-6
lines changed

README.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Awesome HTML Book: HyperText Markup Language (HTML)
22

3+
[![Join our Discord](images/discord.png 'Join our Discord')](https://discord.gg/RFjtXKfJy3)
4+
35
## Table of Contents
46

57
- [Introduction to HTML](#introduction-to-html)
@@ -320,7 +322,7 @@ HTML, which stands for HyperText Markup Language, is the standard language used
320322

321323
#### Brief History of HTML and Its Evolution
322324

323-
![A timeline graphic showing key milestones in the history of HTML, from HTML 1.0 to HTML5.](images/section1_1.png)
325+
![A timeline graphic showing key milestones in the history of HTML, from HTML 1.0 to HTML5.](images/html_timeline.png)
324326
The journey of HTML began in the early 1990s, devised by Tim Berners-Lee, a physicist at the CERN research facility in Switzerland. Initially created to facilitate information sharing between scientists across different universities and institutes, HTML has evolved significantly over the years. Key milestones include:
325327

326328
- HTML 2.0 (1995): The first standard version, which set the core features of HTML.
@@ -332,12 +334,12 @@ These developments were guided by organizations such as the World Wide Web Conso
332334

333335
#### Understanding the Role of HTML in Web Development
334336

335-
![HTML, CSS, JavaScript Interaction Diagram: A Venn diagram illustrating how HTML, CSS, and JavaScript overlap and interact in web development.](images/section1_2.png)
337+
![HTML, CSS, JavaScript Interaction Diagram: A Venn diagram illustrating how HTML, CSS, and JavaScript overlap and interact in web development.](images/html_css_javascript_interaction.png)
336338
HTML is a key component of the web development ecosystem, used in conjunction with Cascading Style Sheets (CSS) and JavaScript. While HTML lays out the structure of the page, CSS is used for styling, and JavaScript for adding interactivity and dynamic content. This combination is essential in creating a diverse range of web applications, from simple static websites to complex interactive platforms.
337339

338340
#### Overview of Web Browsers and How They Interpret HTML
339341

340-
![Browser Rendering: showing how a sample HTML code is rendered in different browsers (Chrome, Firefox, Safari).](images/section1_3.png)
342+
![Browser Rendering: showing how a sample HTML code is rendered in different browsers (Chrome, Firefox, Safari).](images/browser_rendering.png)
341343
Web browsers like Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge are the tools through which users interact with HTML documents. Each browser interprets HTML code to display web pages. Understanding how different browsers parse and render HTML is crucial for developers to ensure consistency and compatibility across the web. This section can delve into the concept of browser rendering engines, cross-browser compatibility issues, and the importance of following web standards to minimize inconsistencies.
342344

343345
##### Example: Basic HTML Structure
@@ -383,7 +385,7 @@ Before diving into HTML coding, it's essential to choose and set up a text edito
383385

384386
#### Understanding the File Structure for Web Projects
385387

386-
![Web Project File Structure Diagram: A flowchart or tree diagram showing a typical web project's file structure, including HTML, CSS, JavaScript files, and a folder for images.](images/section2_2.png)
388+
![Web Project File Structure Diagram: A flowchart or tree diagram showing a typical web project's file structure, including HTML, CSS, JavaScript files, and a folder for images.](images/html_css_javascript_project_structure.png)
387389
Organizing files and folders properly is crucial in web development. A basic project might include separate HTML, CSS, and JavaScript files, along with a directory for images and other media.
388390

389391
Proper organization of web project files is crucial for maintainability and scalability. A typical HTML project might include:
@@ -464,7 +466,7 @@ document.addEventListener("DOMContentLoaded", function() {
464466

465467
### Basics of Document Object Model (DOM)
466468

467-
![Anatomy of an HTML Document: A labeled diagram showing the structure of an HTML document, with tags like <!DOCTYPE>, <html>, <head>, and <body>.](images/section2_3.png)
469+
![Anatomy of an HTML Document: A labeled diagram showing the structure of an HTML document, with tags like <!DOCTYPE>, <html>, <head>, and <body>.](images/dom_structure.png)
468470
Understanding the Document Object Model (DOM) is fundamental in web development. It's a programming interface for HTML and XML documents that defines the logical structure of documents and the way a document is accessed and manipulated.
469471

470472
- **What is the DOM?**: An explanation of how the DOM represents a web page as a tree-like structure.
@@ -1572,7 +1574,7 @@ This example demonstrates how to use microdata within an HTML document to descri
15721574

15731575
### Evolution and Future Trends in HTML5 and Semantic Elements
15741576

1575-
![Evolution and Future Trends in HTML5 and Semantic Elements.](images/section6_7.png)
1577+
![Evolution and Future Trends in HTML5 and Semantic Elements.](images/html_evolution.png)
15761578
The evolution of HTML5 and its semantic elements represents a significant leap forward in web development. As we look toward the future, it's clear that the emphasis on semantics, accessibility, and machine-readable code will continue to shape the development of HTML standards and practices. In this section, we'll explore some of the current trends and future directions in the use of semantic HTML, including code examples to illustrate these concepts.
15771579

15781580
#### Increased Emphasis on Accessibility

images/advanced_techniques.png

-155 KB
Binary file not shown.
File renamed without changes.

images/discord.png

11.4 KB
Loading
File renamed without changes.

images/enhanced_a11y.png

-153 KB
Binary file not shown.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
 (0)