Assignment #1.
HTML Basics (Page Structure)
Student: Write your full name
Group: Write your group
Objective
By the end of this assignment, students will be able to:
● Understand the structure and purpose of HTML.
● Use basic and intermediate HTML tags to create a simple webpage.
● Apply knowledge of text formatting, images, links, lists, tables, and
forms.
● Publish their first webpage online.
Rules for Submission
1. The assignment must be completed individually. If you have the same
paperwork as other students, you will have 0 to this work.
2. The assignment must be submitted by the deadline, which is specified
in the moodle.astanait.edu.kz. Works submitted after the deadline will
not be accepted! To receive a grade, you must submit by deadline and
defend your work at practice lesson time.
3. SUBMIT REPORT(DOCX FILE) AND YOUR PROJECT FOLDER IN
ZIP FORMAT. Ensure that the project runs without errors. REPORT
MUST CONTAIN:
- YOUR NAME, GROUP
- All tasks with screenshots
- Step-by-step description of achieving the goals of each task
Setup Instructions
1. Install VS Code (or another code editor):
https://code.visualstudio.com/download
2. Create a folder for the project (e.g., assignment1)
Part 1. Introduction to HTML
Step 1. Create a new HTML file named index.html
● Add the basic HTML boilerplate (<!DOCTYPE html>, <html>, <head>,
<title>, <body>).
● Title your page as "My First Webpage".
Step 2. Structure text using HTML tags
● Add headings <h1> to <h3> with your name, course, and "About Me".
● Add a short paragraph <p> describing yourself.
Step 3. HTML Lists
● Create an ordered list <ol> of your hobbies.
● Create an unordered list <ul> of your favorite websites.
Step 4. Images and Links
● Insert your photo using the <img> tag.
● Add at least two clickable links with <a> (e.g., to your favorite websites).
Step 5. HTML Buttons
● Add a simple button with text "Click Me". (No functionality required yet).
Part 2. Intermediate HTML
Step 6. Tables
● Create a table with 3 columns: "Subject", "Day", "Time".
● Fill in a simple weekly class schedule.
Step 7. Using Tables for Layout (Optional Challenge)
● Create a two-column layout using a table: left column (menu), right
column (main content).
Step 8. Typing Emojis
● Add at least 3 emojis inside a paragraph about your mood today.
Step 9. HTML Forms
● Create a form with the following fields:
○ Name: text input
○ Email: email input
○ Favorite Color: color input
○ Submit Button
Step 10. Publish Your First Website
● Use GitHub Pages or Netlify to publish your home.html.
● Submit the URL link along with your files.
Evaluation Criteria (100 points total):
➔Functionality (15 points):
◆ Webpage includes correct HTML boilerplate and runs without
errors.
◆ Text is properly structured with headings, paragraphs, and lists.
◆ Images, links, tables, buttons, and forms work as intended.
◆ Published webpage link is functional.
➔Code Quality (20 points):
◆ Correct use of HTML tags and attributes.
◆ Code is well-indented, readable, and logically organized.
◆ Includes comments where necessary to explain sections of the
code.
➔User Interface (15 points):
◆ Layout is clear and visually structured.
◆ Content is easy to navigate (headings, sections, lists).
◆ Images and links are displayed and aligned properly.
➔Customization (10 points):
◆ Page includes personalized content (e.g., hobbies, schedule,
emojis).
◆ Creativity in design (unique choices of text, images, and
structure).
➔Defense during Practice Lesson (30 points):
◆ Student clearly explains their code and chosen structure.
◆ Demonstrates understanding of HTML concepts used.
◆ Answers instructor’s questions correctly with confidence.
➔Report (10 points):
◆ The report is well-written, clear, and concise.
◆ Includes objective, description of steps taken, screenshots of
webpage, and final reflection.
◆ Proper formatting (headings, bullet points, or numbered sections).
Resources:
1. Abitova G.A. Web technologies Front-End Development. Part 1
(2022);
2. https://www.youtube.com/playlist?list=PLPT6CF0r4E3rOUj9uA
S-SPOsJKJ1O1uxn
3. https://www.w3schools.com/html/html_basic.asp
**Questions will be based on the provided resources
Good luck!
Note: Feel free to seek assistance from me or use online resources. You can
contact me via Microsoft Teams or during Office hours if you need detailed
guidance.
Please remember: contact hours are from 9:00 AM to 8:30 PM
(Monday-Friday). Messages sent outside this time will not receive an
immediate response.
