Learning To Code An HTML Web Page with the TechnoHTML5 Curriculum
Learning To Code An HTML Web Page with the TechnoHTML5 Curriculum
We live in a Digital World where communication, networking and business, happens online, rather than face-to-face. Digital Assets such as; websites, blogs, and social media pages, are valued the most and an absolute must-have in today’s day & age. The brand is perceived positively or negatively basis its website and reviews/ratings on the internet. All marketing efforts, including budgets, are strategically planned in a way to increase the ‘online image’ and thereby increase awareness & reach. This means, if you want to survive in the ‘Digi Age’ you need to ‘armor up’ with relevant skills.
Computer lessons in schools have undergone a major upgrade in their curriculum to match with the changing pace, especially in tech-advanced regions like UAE and other GCC counterparts. Students as early as elementary school are learning basic fundamentals of coding to power robots and bring high-tech ideas to life. By the time students graduate from school, they are even equipped to construct their own website from scratch.
Steps to Create a Web Page in HTML
Many beginners have apprehensions about coding and find it to be like rocket science, thereby staying away from the same. However, reading through this Blog will change your perspective. Let’s get started by learning about some important jargons associated with the process;
HTML
Hypertext Markup Language is a language that organizes web pages. It adds structure to the pages and its content. This essentially means making the text look presentable with bullet points, using tables wherever required, and spacing out paragraphs.
HTML Tags
With the help of tags, the browser distinguishes between HTML content and simple content. It contains three main parts, opening tag, content tag, and closing tag. Every tag has its specific task and the tag is written within such brackets < >.
Example: <tag> content </tag>
PHP
The full form of PHP is “PHP: Hypertext Preprocessor.” It is a widely used open-source language to build web applications
To Get Started We Need the Following
A Text Editor
To write an HTML code, we need to use any of the text editors you are comfortable with; Notepad on Windows or TextEdit on Mac. You are not required to additionally install any text editor from the net, just work with the one already available on your computer.
A Browser
Any browser will do; Firefox, Chrome, Safari, or any other browser that you use.
Now that we have assimilated everything we need, let’s get started…
#1 Content
A content-rich website is suitable to clearly communicate the brand’s message across and give the target audience an idea of the products/services. Pre-plan what content you wish to showcase on your website’s home page and other internal sub-pages on a word document and use important keywords to enhance your search rating for the purpose of SEO.
#2 Download Images
Use a free-pic platform to download images or get high-resolution images from a paid source. Save all shortlisted images in a folder.
#3 Website Design
Choosing a proper Web design is important, as the look & feel of the website depends upon a proper template. Avoid gaudy colors with unconventional layouts. Let the design be simple, yet effective.
#4 Write HTML Codes
Writing a proper code will allow your website to be displayed the way you want it to look. Use this below code to begin with:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>Your content here.</body>
</html>
Save the file in proper format – ‘name’ followed by ‘.html’, for example- fashion.html.
#5 Add the Content
In this step, we will add the content or text that you wrote earlier between the body tags.
#6 Add HTML Tags
Add headings correctly in h1 tags section.
<h1>
Fashion Trends: New Arrivals for Summer 2022
</h1>
#7 Add a List
Listings under bullet points need to be drafted in the following fashion;
<ul>
<li>Wear dresses for summer.</li>
<li>Choose cotton fabrics.</li>
<li>Go for light colors and floral prints.</li>
</ul>
#8 Include Images
Use the image tag to add the images from the file you saved earlier, so that It is uploaded on the web page.
<img src=”images/file-name.jpg”>
And you are kind of done! Refresh the browser to see how your website looks and make corrections wherever required.
TechnoHTML5 TechnoKids has introduced the TechnoHTML5 curriculum to allow students to code a one-of-its-kind web page with HTML and CSS lessons for beginners. Add style text, graphics, and hyperlinks to your project and display your creativity. Such interesting modules by TechnoKids are a hit in schools across the globe, including IB institutes in Dubai in the Middle East. To learn more about TechnoKids, visit our website: <link>
Recent Comments