تعلم HTML من الصفر للاحتراف

Layla sat cross-legged on her small apartment balcony, laptop balanced on her knees, the late afternoon sun warm against her skin. She had spent the morning scrolling through tutorials, overwhelmed by terms like frontend, backend, and full-stack, each promising a path forward but offering no clear first step. Her goal was simple: build a personal website to showcase her photography. But every guide seemed to assume she already knew the basics.

A notification pinged on her phone. It was Khaled, her friend who worked as a web developer.

Khaled: Hey, saw you were looking into web dev. Want to grab coffee and talk through where to start?

She smiled, typing back quickly.

Layla: Yes, please. I feel like I’m trying to learn a language without knowing the alphabet.

They met at a quiet café near her building, the clink of cups and low murmur of conversation blending with the hiss of the espresso machine. Layla unfolded her laptop as Khaled slid into the chair opposite her.

“So,” he began, stirring his coffee, “you know how when you visit a website, you see text, images, buttons—everything arranged just so?”

Layla nodded.

“That’s not magic. It’s code. And HTML is the foundation. Think of it like building a house. HTML is the frame—the walls, doorways, rooms. It gives everything structure. CSS is the paint, the flooring, the lighting—it makes it look nice. JavaScript is the electricity and plumbing—it makes things work, like a door that opens when you click it or a menu that drops down.”

Layla frowned slightly, turning the analogy over in her mind. “So if I take away the CSS and JavaScript, I’d still have the rooms and doors?”

“Exactly,” Khaled said. “Just… plain. Functional, but barebones. Try this.”

He slid his laptop toward her and opened a browser. He typed in a familiar news site’s address and waited for it to load. Then, with a few quick keystrokes, he pulled up the page’s source code—a wall of angled brackets and text.

“See all those <p> and <h1> and <div> tags?” he said, pointing. “That’s HTML. It’s not telling the browser how to make things blue or bold or interactive. It’s just saying, ‘Here’s a heading. Here’s a paragraph. Here’s an image.’ The browser reads that and builds the page from it.”

Layla leaned in, her finger hovering over the trackpad. She clicked into the source window and began to read, slowly at first, then with growing recognition. <header>, <nav>, <article>, <footer>—the tags weren’t random. They named parts of the page, like labels on rooms in a blueprint.

“It’s like… labeling everything,” she murmured.

“Exactly,” Khaled said. “HTML doesn’t care how it looks. It only cares what things are. That’s why it’s called a markup language—it marks up content with meaning.”

She opened a new tab and typed data:text/html, <h1>Hello</h1><p>This is a test.</p> into the address bar, then hit enter. The browser displayed a bold heading and a line of plain text beneath it—no styling, no scripts, just structure.

A quiet thrill passed through her. She had done that. With just a few characters, she had told the browser exactly what to show.

Khaled watched her, smiling. “That’s your first webpage. Not much to look at, but it’s real. And it’s all HTML.”

Layla leaned back, the sun now low enough to cast long shadows across the balcony floor. She didn’t yet know how to make it beautiful or interactive, but for the first time, she understood where to begin. The web wasn’t a mystery—it was a language, and she had just spoken her first sentence.

Layla closed the browser tab showing the data URL and turned to Khaled, her mind buzzing. “That was cool,” she said, “but it felt… temporary. Like writing in the sand. How do I make something that stays?”

Khaled nodded. “Good instinct. Real websites live in files. Let’s get you set up properly.”

He pulled out his phone and opened a browser, navigating to a site for a lightweight code editor. “This one’s free, runs in the browser if you want, but I’d recommend installing it locally. Gives you more control.” He showed her the download page. “It’s called VS Code. Popular, but not overwhelming for starters.”

Layla watched as he clicked the download button, then opened the installer once it finished. “You don’t need to configure much,” he said, clicking through the setup wizard. “Just accept the defaults. We’ll keep it simple.”

Once installed, Khaled guided her to open the editor. The window opened with a blank file and a sidebar on the left. “This is your workspace,” he explained. “You’ll create folders for your projects, and each file you make will appear here.”

“So I make a folder for my photography site?” Layla asked.

“Exactly,” he said. “Let’s start with a test folder. Call it something like ‘first-page’.”

She created the folder on her desktop, then inside it, a new file. Khaled hovered over her shoulder as she named it. “Call it index.html,” he said. “That’s the default name browsers look for when you open a website.”

She typed the name, and the editor changed the file type to HTML, coloring the text differently. “Now,” Khaled said, “type this: an exclamation point, then ‘html’, and press Enter.”

Layla did. The editor expanded it into a full boilerplate:

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>

</body> </html> ```

“Whoa,” she breathed. “It filled in all that on its own?”

“Emmet,” Khaled said. “It’s a shortcut. Saves typing. But now you see the structure: DOCTYPE tells the browser it’s HTML5, html wraps everything, head holds metadata like character set and title, and body is where the visible content goes.”

Layla clicked inside the body tags. “So if I put my heading and paragraph here, it’ll show up?”

“Try it,” he said.

She typed:

``html <h1>Hello, World!</h1> <p>This is my first real HTML file.</p> ``

Then she saved the file—Ctrl+S, Khaled reminded her—and minimized the editor. She opened her file explorer, navigated to the folder, and double-clicked index.html.

The browser launched, displaying a clean page: the heading large and bold, the paragraph beneath it in plain black text. No styling, no flash—just structure, exactly as she’d intended.

A grin spread across her face. “It worked,” she whispered.

Khaled leaned back in his chair, smiling. “You didn’t just view code. You authored it. And the browser obeyed.”

She refreshed the page, then went back to the editor and changed the heading to <h1>Welcome to My Photography</h1>. She saved, returned to the browser, and refreshed again. The text updated instantly.

“It’s like a conversation,” she murmured. “I write something, save it, and the browser answers.”

“Exactly,” Khaled said. “That’s the feedback loop. Code → save → reload → see. The tighter that loop, the faster you learn.”

She experimented, adding a second paragraph, then wrapping a word in <strong> tags to make it bold. Each change appeared the moment she refreshed. The immediacy was intoxicating.

After a while, she leaned back, staring at the screen. “I still don’t know how to make it look nice,” she admitted. “Or add a gallery for my photos.”

“That’s where CSS and JavaScript come in,” Khaled said. “But you’ve got the foundation now. You can structure anything. Everything else builds on that.”

Layla nodded, her earlier overwhelm replaced by quiet certainty. She closed the laptop, gathered her things, and stood. “Thanks,” she said. “I think I’m actually going to enjoy this.”

As they walked out of the café, the evening air cool against her skin, Layla glanced down at her laptop bag. Inside, the file she’d made waited—not just code, but proof that she could speak the web’s language. And this time, she wasn’t just repeating a sentence.

She was starting to write her own story.

Layla opened her laptop again the next morning, sunlight pooling across the desk as she sipped tea at her kitchen table. The first-page folder sat on her desktop, index.html already open in VS Code. She had spent the evening thinking about how to organize more than just a greeting—she wanted to build something useful, something that reflected her goal of showcasing her photography through a personal site. But first, she needed to practice structure.

“Ready to go beyond hello world?” Khaled’s voice came through her headphones. She’d messaged him after breakfast, and he’d agreed to a quick check-in.

“Yeah,” she said. “I want to make a recipe page. Something with sections—title, ingredients, steps. I read that headings aren’t just for size, they’re for meaning.”

“Exactly,” he said. “Think of headings as an outline. H1 is the main title—like the name of the dish. H2s are major sections, like ‘Ingredients’ and ‘Directions.’ H3s could break those down further if needed. Use them in order, don’t skip levels. It helps screen readers and search engines understand your page.”

She nodded, even though he couldn’t see her. “So if I use an h3, there should be an h2 above it?”

“Right. Don’t jump from h1 to h3. Keep the hierarchy logical.”

She deleted the old content and started fresh.

``html <h1>Spiced Lentil Soup</h1> ``

Below it, she added an h2 for ingredients.

``html <h2>Ingredients</h2> ``

Then she began listing items in a paragraph, but paused. A paragraph felt too dense for a list. She remembered Khaled mentioning semantic tags later—maybe there was a better way. For now, she kept it simple, writing each item on a new line with line breaks.

``html <p> 1 cup red lentils<br> 1 onion, chopped<br> 2 cloves garlic, minced<br> 1 teaspoon cumin<br> 1/2 teaspoon turmeric<br> 4 cups vegetable broth<br> Salt and pepper to taste<br> 2 tablespoons olive oil<br> </p> ``

She saved and refreshed. The browser showed the heading large and bold, the ingredients listed vertically thanks to the <br> tags. It worked, but the paragraph felt stiff. She glanced at Khaled’s earlier advice about meaning over appearance.

“What if I want to emphasize that the cumin and turmeric are key to the flavor?” she asked.

“Then use <strong> for importance,” he said. “Not just to make it bold—because it matters. For stress or tone, like a verbal emphasis, use <em>.”

She went back to the code. Inside the ingredients paragraph, she wrapped the spices.

``html <p> 1 cup red lentils<br> 1 onion, chopped<br> 2 cloves garlic, minced<br> 1 <strong>teaspoon cumin</strong><br> 1/2 <strong>teaspoon turmeric</strong><br> 4 cups vegetable broth<br> Salt and pepper to taste<br> 2 tablespoons olive oil<br> </p> ``

She saved and refreshed. The words “teaspoon cumin” and “teaspoon turmeric” now stood out in bold. Not just visually—she realized they carried weight. If someone couldn’t see the styling, a screen reader would still announce them with added emphasis, signaling their significance.

Next, she added the directions.

``html <h2>Directions</h2> <p> In a pot, heat olive oil over medium heat. Add onion and cook until soft. Stir in garlic and cook for 30 seconds. Add lentils, <em>then</em> stir in cumin and turmeric and cook for one minute until fragrant. Pour in broth, bring to a boil, then reduce heat and simmer for 25 minutes, or until lentils are tender. Season with salt and pepper. Serve warm. </p> ``

She wrapped “then” in <em> tags—not to italicize for style, but to show the sequence mattered. That step came after the others, a small but meaningful pause in the process.

She leaned back. The page wasn’t beautiful—no colors, no images—but it was clear. The headings created a map. The strong and em tags gave nuance to the text. She imagined someone using a screen reader navigating from “Spiced Lentil Soup” straight to “Ingredients,” hearing the key spices highlighted, then moving to “Directions” with the rhythm of the steps made audible through emphasis.

“It feels… deliberate,” she said quietly.

“Good,” Khaled replied. “You’re not just marking up text. You’re giving it structure and meaning. That’s what HTML is for.”

She saved the file one last time, the cursor blinking at the end of the paragraph. The recipe wasn’t live yet—no photos, no styling—but it was hers. And for the first time, she saw how a few well-placed tags could turn plain text into something that could be understood, not just seen.

She closed the laptop, the morning light shifting across the table, and thought not of how it looked, but of how it worked.

Layla reopened her laptop the following afternoon, the recipe page still glowing in the browser tab. She had closed her laptop feeling satisfied with the structure, but now a new question tugged at her: how would someone actually get to this page? If she wanted to share it, she’d need more than one file. She needed a home page—a doorway.

She created a new file in the first-page folder, naming it index.html. This would be her entry point. Inside, she typed a simple heading and a paragraph.

``html <h1>Welcome to My Kitchen</h1> <p>This is where I share recipes I love. Try my Spiced Lentil Soup.</p> ``

She saved it and opened it in the browser. Clean. Clear. But static. She wanted the words “Spiced Lentil Soup” to do more than sit there—she wanted them to lead somewhere.

“How do I make text clickable?” she asked Khaled when he messaged her later that day.

“You use the anchor tag,” he replied. “<a>. It stands for ‘anchor.’ You wrap it around the text you want to turn into a link, and you put the destination in the href attribute.”

She went back to her index.html file and changed the sentence.

``html <p>This is where I share recipes I love. Try my <a href="recipe.html">Spiced Lentil Soup</a>.</p> ``

She saved, refreshed, and held her breath. The text turned blue and was underlined. She moved her cursor over it—it became a pointing hand. She clicked.

The browser loaded recipe.html. There it was: her structured soup page, headings clear, emphasis in place. She grinned. It worked. Not just a jump, but a journey.

“It’s like opening a door,” she said aloud.

“Exactly,” Khaled’s voice came through her headphones again. “And the text inside the link? That’s just as important as the link itself. Never use ‘click here.’ Describe where it goes. ‘Spiced Lentil Soup’ tells someone exactly what they’ll find—especially if they’re using a screen reader that reads links out of context.”

She nodded, thinking of how disorienting it would be to hear “click here, click here, click here” with no sense of destination. She changed nothing—the text was already descriptive. Good.

Now she wanted to go the other way. From the recipe page, she wanted a way back home.

She opened recipe.html and added a line at the bottom.

``html <p><a href="index.html">Back to Home</a></p> ``

She saved, refreshed the recipe page, and clicked the new link. Back to the welcome page. The loop was complete. Two pages, talking to each other.

“Links aren’t just for jumping around,” she said. “They’re for building a world.”

“Yes,” Khaled said. “And every link is a promise. You’re telling someone, ‘If you follow this, you’ll find what I said you would.’ Keep that promise clear, and your site earns trust.”

She leaned back, pleased. But something still felt missing. The recipe was clear, the navigation worked—but it was all text. She closed her eyes and imagined the soup: the golden lentils, the swirl of olive oil, the steam rising. How could she show that?

“What about images?” she asked. “Can I put a picture of the soup right on the page?”

“Absolutely,” Khaled said. “Use the <img> tag. It’s self-closing—you don’t need a separate closing tag. You need two things: src, which tells the browser where the image file is, and alt, which gives a text description for anyone who can’t see the image.”

Layla downloaded a photo she’d taken of her finished soup—a bowl in soft morning light, garnish of parsley visible. She saved it as soup.jpg in the same folder.

Back in recipe.html, she placed her cursor right under the <h1>Spiced Lentil Soup</h1> line and typed:

``html <img src="soup.jpg" alt="A bowl of spiced lentil soup with a sprinkle of fresh parsley, steaming gently"> ``

She saved and refreshed. There it was—the image, centered naturally in the flow of the page. The steam looked almost real. She imagined someone using a screen reader hearing the alt text and being able to picture the dish just as clearly.

She tried removing the alt text temporarily and refreshed. The image still appeared, but she knew—without that description, the meaning was lost to anyone relying on assistive technology. She put it back immediately.

“It’s not decoration,” she said. “It’s part of the story.”

“Exactly,” Khaled said. “If the image conveys information, the alt text must convey that same information. If it’s purely decorative, you can leave alt empty—but never omit the attribute. And always ask: does this image add meaning? If yes, describe it.”

She saved the file one final time. The recipe page now had structure, navigation, and image—all working together. She clicked the link from her home page, arrived at the soup, saw the photo, read the steps, felt the emphasis on the spices and the sequence. It was no longer just markup. It was a place.

She closed her laptop, the screen darkening, but the image lingered in her mind—not as pixels, but as promise. She had built something that could be found, followed, and understood. And tomorrow, she’d begin again.

Layla sat back in her chair, the glow of her laptop screen reflecting in her eyes as she scrolled through the final version of her photography portfolio page. The chapter on links and media had left her with a functional but visually flat layout—headings, paragraphs, images, and a navigation bar built entirely from <div> tags. It worked, but something felt off, like arranging furniture in a room without labeling its purpose.

She opened the file in VS Code, the familiar interface comforting after weeks of use. The cursor blinked at the end of the closing </body> tag. She had spent the morning refining her image gallery, adjusting alt text for each photograph to describe not just the subject but the mood—sunlight catching the edge of a teacup, the blur of a bicycle passing through a rainy street. Now, she wanted to give the page bones that made sense, not just to browsers but to anyone relying on screen readers or keyboard navigation.

Khaled’s voice echoed in her mind from their last coffee meetup: “Semantic tags aren’t just for SEO, Layla. They’re about clarity. Think of them as naming the rooms in your house instead of just calling them ‘space one’ and ‘space two.’”

She began at the top. The <div class="header"> that held her name and a brief tagline became <header>. Inside, the <h1>Welcome to My Photography</h1> stayed, but she wrapped the short bio beneath it in a <p> tag—no need for extra semantics there, just clear prose.

Next came the navigation. Her horizontal list of links—Home, Gallery, About, Contact—had lived in a <div class="nav">. She changed the wrapper to <nav>, then marked the list itself as <ul> with each item in <li>, each link as <a href="#">. Simple, but now the purpose was explicit.

The main content followed. Where a <div class="content"> had cradled everything from her featured photograph to the three-column section describing her style, she replaced it with <main>. Inside, she identified thematic chunks: the hero image with its caption became a <section>, the three-column description of her approach—light, moment, story—each received its own <section> as well. She resisted the urge to over-divide; not every grouping needed a tag, only those that formed a distinct thematic unit.

At the bottom, the <div class="footer"> holding her copyright notice and a small icon for her Instagram became <footer>. She kept the text small and muted, as before, but now it belonged to a landmark that screen readers would announce as “footer.”

She saved the file and opened it in Chrome. Right-clicking anywhere on the page, she selected “Inspect,” then clicked the “Accessibility” tab in the developer tools panel. Her heart lifted as she saw the landmarks listed: banner, navigation, main, complementary, content info. The <header> registered as banner, <nav> as navigation, <main> as main, and <footer> as content info. Even the <aside> she had considered adding for a side quote—though she ultimately left it out for simplicity—would have shown up as complementary.

She opened the axe extension she had installed the week prior and ran a quick scan. No accessibility errors. The color contrast passed, form labels were properly associated (she’d added those earlier in the chapter on forms, though her contact form remained a work in progress), and the heading structure was logical—no skipped levels.

Leaning back, Layla smiled. The page looked no different to the eye, but its meaning had deepened. It wasn’t just prettier code; it was kinder code. She imagined someone using a screen reader, moving swiftly from the banner to the navigation, jumping straight to the main content without wading through repetitive divs, and knowing exactly where they were when they reached the footer.

Her phone buzzed on the desk—a message from Khaled: How’s the portfolio coming? She typed back: Just gave it semantic structure. Feels like the house finally has named rooms. After a beat, he replied: Now you’re thinking like a developer.

She closed the laptop, the afternoon light shifting across her desk, and thought not of code, but of the quiet satisfaction of building something that could be used—truly used—by anyone.

She opened a new file in VS Code, naming it contact.html, and saved it inside her first-page folder. The cursor blinked in the empty window, and for a moment, she stared at it, remembering how daunting a blank page had once felt. Now, it felt like an invitation.

She began with the boilerplate—doctype, html, head, meta charset, title, link to a simple stylesheet she’d started experimenting with—and then, inside the body, she added a <section> with an aria-label of "Contact form" to give it a clear landmark. Within it, she wrote a heading: <h2>Get in Touch</h2>. Below it, she opened a <form> tag, setting its action to "#" and method to "post" for now, knowing she’d connect it to a backend later.

First, the name field. She typed <label for="name">Full Name</label>, then <input type="text" id="name" name="name" required>. She paused, recalling how Khaled had once shown her that a label isn’t just text—it’s a bridge. When she clicked the label in the browser, the cursor jumped into the input. That was the point. She added <small>Please enter your full name as it appears on official documents</small> beneath it, not for validation, but for clarity.

Next, email. <label for="email">Email Address</label>, then <input type="email" id="email" name="email" required>. The email type, she remembered, gave her built-in validation—browsers would flag formats like "layla@domain" or "layla.domain.com" before submission. She added a <small>We’ll never share your address. We’ll use it only to reply to your message.</small> to ease privacy concerns.

Then, the message box. <label for="message">Your Message</label>, followed by <textarea id="message" name="message" rows="5" required></textarea>. She made sure the rows attribute was set so the field wouldn’t collapse to a single line on small screens. Below it, she added <small>How can we help? Feel free to ask about prints, collaborations, or just say hello.</small>

She added a <button type="submit">Send Message</button> at the end, making sure it was a proper button, not a div styled to look like one. Buttons, she’d learned, are natively focusable and activatable with Enter or Space—critical for keyboard-only users.

She saved the file and opened it in Chrome. Tabbing through the form, she watched the focus ring jump from label to input, from email to message, and finally to the button. Each time, the associated label was announced by her screen reader when she hovered with NVDA, which she’d installed after Khaled’s suggestion. The required fields didn’t let her submit empty—she tried, and the browser blocked submission, showing native tooltips: “Please fill out this field.” She smiled. No JavaScript needed for basics.

She tested error states. Typing "layla" into the email field and tabbing out triggered a red outline and a message: “Please enter an email address.” She corrected it to layla@example.com—valid. The error vanished. She filled in name and message, then tabbed to the button and pressed Enter. The page reloaded, as expected with action="#". No data sent, but the mechanics worked.

She opened the axe extension again. Ran a scan. No errors. Color contrast passed. Labels were properly associated. The form was operable via keyboard. She even turned off her monitor and navigated using only her voice via Windows Speech Recognition, saying “click send message” to submit—success.

Later that evening, Khaled knocked lightly on her bedroom door, holding two cups of karak chai. “Heard you were tinkering with forms,” he said, stepping in. He peered at her screen. “Looks clean. Labels linked, inputs typed, button native. You even used rows on the textarea—nice touch.”

Layla smiled, stretching her wrists. “I wanted it to work for everyone. Not just people who use a mouse or see the screen. I tested it with NVDA, keyboard only, even voice control. No errors in axe.”

He nodded, impressed. “You’ve moved beyond making things work. You’re making them work well. That’s the difference between coding and crafting.”

She leaned back. “It’s funny. I used to think accessibility was a checklist—add labels, use alt text, don’t skip headings. Now it feels… natural. Like holding the door open for someone behind you. You don’t do it because you’re told to; you do it because it’s just how you move through the world.”

Khaled sat on the edge of her bed, setting down his cup. “That’s exactly it. The web isn’t a place you visit—it’s a space you inhabit. And you’ve just built a room where anyone can enter, sit down, and be heard.”

She glanced at the form on her screen—the humble contact box, unadorned but intentional. No flashy animations, no complex scripts. Just fields that asked clearly, labels that connected, and a button that responded to touch, key, or voice.

Outside, the city lights flickered on one by one. Inside, her laptop glowed softly, the cursor waiting in the message field, ready for the next message—whenever it came.