Week - 4
I hope you've been having an awesome time learning in Week 3 Module because let me tell you, you're killing it! Your hard work and dedication are paying off, and you should be proud of yourself.
Remember, if you ever need a break from studying, I'm here to share some fun facts.
Did you know that the first computer mouse was made of wood?
That's right, in 1964, a prototype of the computer mouse was built by Douglas Engelbart, and it was made out of a block of wood with a single button. It's hard to imagine using something so primitive now that we have wireless mice with multiple buttons and scrolling capabilities.
After end of this week, you should be able to:
- write beautiful HTML code with professional level style guide
- get familiar with different symbols, emojis, entities, charsets, etc. on HTML
- know what is URL & how it works
- know a little bit about XHTML
- build forms on websites
- attach different medias (sound, videos, images, etc.) on websites
Let’s get into it 🚀
Follow this comprehensive day-by-day guide to fulfill your dream of becoming an ultimate professional developer in the future.
Day - 1
We’ve learned a lot of things of HTML Writing clean and organized HTML is crucial for creating maintainable and scalable web projects. We're going to cover some essential tips and best practices for creating an HTML style guide. From formatting and indentation to naming conventions and code structure. Let's get started!
HTML Style Guide and Coding Conventions
Have you ever tried to include special characters like © or ® in your HTML code, only to find that they don't display correctly in the browser? That's where HTML entities come in. An HTML entity is a piece of text that begins with an ampersand (&) and ends with a semicolon (;). It's used to represent special characters and symbols that can't be included in HTML code directly.
In this short intro, we'll explore what HTML entities are, why they're important, and how to use them in your HTML code.
Please remember that you don’t have to memorize any of these. Just copy paste the code when you need them.
HTML URLs, or Uniform Resource Locators, are an essential part of navigating the web. They provide a standardized way to access web resources, such as web pages, images, videos, and more. We'll explore the fundamentals of what URLs are, how they work, and why they're important.
https://www.youtube.com/watch?v=AlkDbnbv7dk
Day - 2
Why did HTML break up with XHTML?
Because HTML said, "I like my tags loose and flexible," but XHTML was like, "I prefer them strict and well-formed." They just couldn't see eye to eye on markup!
I know this is a boring Joke but it makes sense right? 😄
So let’s take a look between them.
HTML forms are an essential component of building interactive websites. With forms, users can input and submit data, such as contact information, search queries, and more. HTML forms allow for user interaction and engagement, making websites more dynamic and user-friendly. In this context, we can say that HTML forms provide a means for communication between users and websites.
https://www.youtube.com/watch?v=fNcJuPIZ2WE
⚠️ Don’t forget to checkout all the attributes.
| Attribute | Description |
|---|---|
| https://www.w3schools.com/tags/att_form_accept_charset.asp | Specifies the character encodings used for form submission |
| https://www.w3schools.com/tags/att_form_action.asp | Specifies where to send the form-data when a form is submitted |
| https://www.w3schools.com/tags/att_form_autocomplete.asp | Specifies whether a form should have autocomplete on or off |
| https://www.w3schools.com/tags/att_form_enctype.asp | Specifies how the form-data should be encoded when submitting it to the server (only for method="post") |
| https://www.w3schools.com/tags/att_form_method.asp | Specifies the HTTP method to use when sending form-data |
| https://www.w3schools.com/tags/att_form_name.asp | Specifies the name of the form |
| https://www.w3schools.com/tags/att_form_novalidate.asp | Specifies that the form should not be validated when submitted |
| https://www.w3schools.com/tags/att_form_rel.asp | Specifies the relationship between a linked resource and the current document |
| https://www.w3schools.com/tags/att_form_target.asp | Specifies where to display the response that is received after submitting the form |
Day - 3
⚠️ Don’t forget to checkout all the form elements
| Tag | Description |
|---|---|
| https://www.w3schools.com/tags/tag_form.asp | Defines an HTML form for user input |
| https://www.w3schools.com/tags/tag_input.asp | Defines an input control |
| https://www.w3schools.com/tags/tag_textarea.asp | Defines a multiline input control (text area) |
| https://www.w3schools.com/tags/tag_label.asp | Defines a label for an element |
| https://www.w3schools.com/tags/tag_fieldset.asp | Groups related elements in a form |
| https://www.w3schools.com/tags/tag_legend.asp | Defines a caption for a |
| https://www.w3schools.com/tags/tag_select.asp | Defines a drop-down list |
| https://www.w3schools.com/tags/tag_optgroup.asp | Defines a group of related options in a drop-down list |
| https://www.w3schools.com/tags/tag_option.asp | Defines an option in a drop-down list |
| https://www.w3schools.com/tags/tag_button.asp | Defines a clickable button |
| https://www.w3schools.com/tags/tag_datalist.asp | Specifies a list of pre-defined options for input controls |
| https://www.w3schools.com/tags/tag_output.asp | Defines the result of a calculation |
Day - 4
Day - 5
HTML media allows web developers to embed various multimedia content, such as images, videos, and audio, into their websites. This not only enhances the visual and auditory experience for users but also allows for more engaging and interactive content. With HTML media, web developers can customize the appearance and functionality of multimedia elements, such as controlling the size and playback of videos and audio files. In this way, HTML media plays a critical role in creating compelling and dynamic web content.
Awesome 😍, you’ve just completed week 4 module. Remember, we took the day-5 off. That’s why in this week we covered a lot 😉. At this point you should be able to:
- write beautiful HTML code with professional level style guide
- get familiar with different symbols, emojis, entities, charsets, etc. on HTML
- know what is URL & how it works
- know a little bit about XHTML
- build forms on websites
- attach different medias (sound, videos, images, etc.) on websites
If you still have any doubts or problems understanding the content above, feel free to review this module again next week. Remember, this is a self-paced, step-by-step learning process. You can take as much time as you need, so don't feel pressured or discouraged.
All the sources are collected from YouTube, MDN, W3Schools, WebDev, different blog sites, & roadmap.sh.
That’s it for this week. See you on the week 5. Till then happy coding 😉.