HTML Document Structure and Text Formatting, HTML Lists and Tables, HTML Forms and HTML Web Content Integration and Media Elements.
The objective of this assignment is to demonstrate my understanding of HTML document structure, the head and body elements, headings, paragraphs, text formatting, and the use of comments in HTML. Ensure your HTML document includes the necessary structural elements such as <!DOCTYPE html>, <html>, <head>, and <body>.
Inside the head element,I included a <title> element with a descriptive title for my webpage. Also included a favicon and a few metadata for your document.
Inside the body element, I created the main content of my webpage which included,
The appropriate use of appropriate heading tags (e.g., <h1>, <h2>, <h3>) to structure my content. I also created at least two levels of headings.
I also wrote at least two paragraphs of text in the body of my webpage and ensured that they are well-structured and informative.
I applied text formatting to my content using HTML tags. For example, made some text bold, italic, underlined specific parts of my paragraphs and applied other formatting tags to my paragraphs.
I included comments in my HTML code to explain the purpose and structure of different sections of my document and used comments to describe my headings, paragraphs, and other significant elements.
Finally, I double-checked my HTML file for any errors or typos.
Inside the body element, I created the main content of my webpage by:
Replicating the design of the attached file below.
Under Project, I used an unordered list with square bullets to list at least four interesting project titles.
Under History, I used an ordered list with lowercase alphabetical characters for numbering to list at least three history topics.
Finally, I double-checked my HTML file for any errors or typos.
Within the <body> tag, I created a <form> tag that collects basic user information, such as name, email address, and age.
I also implemented appropriate form fields for each piece of information (text input for name and email, and number input for age) and used the appropriate HTML attributes to ensure that the form fields are required and have proper labels.
I included input fields for phone number, date of birth (use the date input type), and a dropdown menu for the user's country of residence.
I also ensured that the phone number input accepts only numbers, the date of birth is displayed in a user-friendly format, and the country dropdown menu contains a list of different countries.
I then proceeded to create a new form section to collect information about the user's interests. This included radio buttons for gender selection (Male, Female) and checkboxes for the user to select multiple hobbies (e.g., Reading, Sports, Music, Travel, etc.) and then added a text area to the form, allowing users to enter additional comments or feedback. I also included a "Submit" button that, when clicked, should trigger form submission. I implemented form validation using HTML5 attributes to ensure that all required fields are filled out correctly before submission, and ensure that email address and telephone fields are also validated. Finally, I double-checked my HTML file for any errors or typos.
I used <div> and <span> elements to demonstrate block and inline elements, respectively.
Inside the <div>, I included a paragraph of text and a list (<ul>) with some items.
Inside the <span>, I then write a sentence and add a few inline elements like <strong>, <em>, and <a> (link).
I then assign a class (class="highlight") to the paragraph within the <div> and style this class later using CSS (give it a red color).
I gave an ID (id="main-heading") to the sentence within the <span>, bearing in mind that IDs should be unique on a page.
I also embedded an external webpage (e.g., https://aliexpress.com) within an <iframe>and added the width and height attributes for the iframe.
I organized images in an "images" folder and a video in a "videos" folder and referenced an image and a video file in my HTML using relative paths (e.g., images/picture.jpg and videos/sample.mp4). I double-checked my HTML file for any errors or typos.