Exercise 2：HTML web page construction
In this class, the teacher explained the basic principles of HTML web page construction and led us to practice the construction of basic personal information interface text information, the symbolic distinction between the main title, subtitle and body text.
Final result
The final product includes an introduction, title, personal profile, blog jump link, course introduction, favorite food, skills introduction, goals and contact information.
Implementation method
I started with the basic structure of <!DOCTYPE HTML>, <html>, <head>, and <body>. In the <head>, I used <title> to set the page title. In the body, I used <h1> and <h2> as the main title and subtitle, clarifying the content hierarchy.
In the body of the article, I used multiple <p> tags to introduce my basic information, major, interests, and life at Taylor's University, meeting the assignment's requirement of "two or more descriptive paragraphs." The course section used an unordered <ul> list to list the modules. "My Favorites" used an ordered <ol> list with nested <ul> tags to display interest categories. Finally, I used <ul> tags to describe my skills, goals, and contact information.
In the code, I paid attention to tag closure and semantic clarity, using, for example, <a href> tags to add external links and <b> tags to emphasize key points. The overall structure is clear and well-organized, fully demonstrating the HTML foundation and typographical logic taught in class.
Reflection
By writing index.html, I learned the basic structure and semantics of web pages.
I understood the functions of <!DOCTYPE html>, <html>, <head>, and <body>, and learned how to set the page title in the <head> using <title>.
I learned how to use <h1> and <h2> tags to create a heading hierarchy, write descriptive text with <p>, and create ordered and unordered lists with <ol> and <ul> tags to clearly present content.
This exercise helped me master the basic syntax and structure of HTML, laying a solid foundation for future studies in web design and typography.
Comments
Post a Comment