Exercise 2—HTML Exercise
Netlify link: https://exerice02-dongnuoyan.netlify.app/
<Creating a Simple Profile Page>
<WEEK 3>
π» My webpage content description
For this exercise, I created a file called index.html and used different tags to present my personal information.
Page title
<title>About Me</title>
Personal Introduction
Use <h1> and <p> tags to write a self-introduction, such as my date of birth and personality description.
<h1>Welcome To My Webpage</h1> <h2>This is a single webpage dedicated to myself</h2> <p>My Date of birth is <b> 19 Augest 2005</b></p> <p>I am a cheerful, lively and active girl</p> <hr/>
Daily life at school
This section describes my study life and hobbies at Taylor's University, as well as my portfolio. I wrote about waiting for the elevator with friends, studying in the library, and enjoying reading.
<h1>My Life in Taylor's</h1>
<h2>How I stay alive in my Uni</h2>
<p>I usually like to wait for the elevator with my friends in the teaching building, and go to the library to study in my spare time.</p>
<p>I like read books. <a href="https://dongnyyyy0819.blogspot.com/">dummy text</a> ever since the rmdsmme1500s, when an unknown printer took a galley of type and scrambled it tomake a type specimen book.</p>
Modules
<h2>Modules that I enrolled This semester</h2> <ul> <li>Sonic Design </li> <li>Interactive Design</li> <li>Performative Media</li> <li>Advanced Modeling and Animation</li> <li>Games Development</li> </ul>
My favorites
Use ordered lists <ol> and nested lists <ul> to display my favorite foods, movies, colors, and favorite people.
<h2>My favourite</h2>
<ol>
<li>Food
<ul>
<li>Hot pot</li>
<li>Snail noodles</li>
<li>Ramen</li>
</ul>
</li>
<li>Movies
<ul>
<li>Spider-Man: Into the Spider-Verse</li>
<li>Little Forest</li>
<li>Zootopia</li>
</ul>
</li>
<li>Colors
<ul>
<li>Red</li>
<li>Black</li>
<li>White</li>
</ul>
</li>
<li>Person
<ul>
<li>Zhou Jielun</li>
<li>Cang sang</li>
</ul>
</li>
</ol>
The final full version of the webpage
Although the entire webpage is simple, it helped me master the basic syntax of HTML and the hierarchical structure of web pages.
HTML file
✨ Reflection
This exercise gave me a clearer understanding of the basic HTML writing techniques and logical structure.
During the design process, I learned how to properly nest tags, distinguish between heading levels, and organize different levels of information using <ul> and <ol> tags. While the page content was still relatively basic, the neat layout I saw when I opened it in a browser after completion piqued my interest in web design.
In the future, I hope to continue learning to beautify my pages, making them richer and more stylish.
<WEEK 4>
The teacher taught us how to use Adobe Dreamweaver (DW) to edit web pages, from establishing the website structure, inserting pictures, to background setting and table creation, so that we could experience the real website design process step by step.
π️ Website Creation and Deployment Settings
At the beginning, the teacher reviewed last week's content and told us:
"The homepage file of the webpage must be named index.html!"
This step is crucial ⚠️, because if the file name is not this, the webpage will not open after it is launched.
In DW, we learned how to:
• Create a new website (Site);
• Select a project folder;
• Upload the webpage created last week to the deployment platform.
The teacher also demonstrated how to modify the URL name to make the links on your webpage look neater and more professional πͺ.
π️ Organizing the Website File Structure
Next, we created a standard website file structure in DW:
project-folder/
│
├── index.html
└── images/
First, we prepared the images on our computer, dragged them into the images folder, and then inserted the path into the HTML.
The advantage of DW is that it automatically completes the path, eliminating the risk of making mistakes like writing code by hand.
However, the teacher also reminded us to understand the principles behind this so we can independently complete the project in other software!
πΌ️ Exercise 3: Inserting and resizing images
This is my favorite part π
I also learned how to resize images:
• Fixed size (e.g., width="300px")
• Percentage size (e.g., width="50%") to make the page responsive even on mobile devices π±
After I made the changes and refreshed the page, I was so happy to see the image display perfectly! π
π¨ Setting the Webpage Background Image
The teacher then taught us how to add a webpage background in DW. There are two ways:
1. Fill the background with a color
<body style="background-color:;">
2. Add a background image
<body style="background-image: url('images/bg.jpg'); background-size: cover; background-repeat: no-repeat;">
π§ΎCreating a Class Schedule (Table)
The last exercise involved creating your own class schedule using the <table> tag.
The teacher explained the basic structure of a table step by step:
<table border="1">
<tr>
<th>Day</th>
<th>Time</th>
<th>Subject</th>
</tr>
<tr>
<td>Monday</td>
<td>9:00–12:00</td>
<td>Interactive Design</td>
</tr>
</table>
Later, we added colspan (for horizontal merging) and rowspan (for vertical merging).
For example, two classes on the same day can be merged into a single cell for a more organized layout.
The first time I mistyped the tags, the entire table was crooked. π€£ It took some time to fix it in code view.
π Reflection
This week, Dreamweaver truly felt more powerful than I imagined!
It has both Code View and Design View, allowing you to work in a graphical interface while still seeing the actual code structure, making learning HTML and CSS much more intuitive.
Although I encountered a number of bugs along the way (like image paths not displaying and backgrounds not loading), every time I fixed them, I felt a huge sense of accomplishment! I feel like my understanding of web page structure and style has become even clearer.
π Documents:
Comments
Post a Comment