Getting Started with Python Part-24
Web Development — HTML and Creating a Website using Atom
Part-I
As an Introductory part of web development, we are gonna look through what is a webpage, the basics of HTML, which describes the structure of a web page, in building a simple static webpage using Atom IDE.
What is Web development?
Developing a website that can range from a simple single static document web page to complex web applications. This website comprises text, graphics, hyperlinks to another webpage, images, videos, etc. Basically, a webpage is a document viewed in an Internet browser commonly written using HTML. The HTML code file is responsible for the structure of your website. If a website was a house, then the HTML would be the builder who would build the walls and establish the structure of your house. So we can write HTML code to build up the structure of your websites and add an image or button or text box etc.
Introduction to HTML:
HTML stands for Hypertext Markup Language, concerned about the structure of websites. It is a command code for the browser to build your own website on the Internet in the preferred style and format. HTML has some tags and attributes that are used to markup the HTML element to perform different functions on your website.
So from the above example, using simple heading HTML tag to determine a phrase as a heading in the higher font denoted as h1. h2 is the next level heading font size tag and up to 6 level heading tags are available in the HTML.
In HTML, there are two types of tags basically used.
- requires closing tags
- self closing tags
For example, where in the situation to close some functions after certain lines we require tags like <h1> always needed a close tag</h1>. On the other hand where we don't need to close some functions like line break and horizontal line which happen to be only once not a continuous one such as <br> and <hr>. Eventhough we did’nt close the these kind of tags makes no effect in the console. For example, <h1> heading </h1>, <center> </center> etc.
Now, moving on the second part which is tags with attributes. It basically gives more information to the browser to specify modifications inside a specific HTML element. In perivious case, In order to modify the created a horizontal line we can use some attributes associated to that HTML element.
In the <hr> element we added some predefined attributes inside the angle bracket to modify it looks by giving attributes like size = 3 px, color = blue and noshade. After made these attributes to work with the element that modifies the horizontal line in the webpage. We can also read through some HTML element documentations from any external resources to know what are the optional attributes available with a HTML element.
Atom IDE to build a website
Atom is a free and open-source IDE for macOS, Linux and Windows with support for plug-ins written in HTML, CSS and JS files. Atom is a desktop application used to built web applications and development.
We can also use Pycharm to code HTML, but for the sake of learning a new IDE for web development would be useful at some point in the future so I preferred to work with atom IDE instead of Pycharm.
Using some of the basic elements in HTML that I have learned in this lesson, got to build a very first website for my online CV and things that like to display in my personal profile website are documented below.
Personal (Profile) Website
Before starting, I would like to give you a brief explanation of HTML boilerplate. The standard HTML boilerplate code in programming use to have a code template that can be reuse or recalled whenever needed for different projects. By tapping HTML + tab or enter key to print the HTML template code format to start the coding on the IDE called HTML boilerplate.
It originated from the day when the printing press make heavy iron plates that would function as their printing template because of they looked very similar to the small metal plate that the builder of a steam boiler called it as boilerplate. That’s where this word is comes from. Similarly it usually means as co-template that you can reuse.
HTML starts with <html> and by default comes with attributes like lang=”en” and dir=”ltr” which denotes the language of the text which is of course “English” and direction of text “left to right”. HTML differentiated into two parts which are head and body. Everything that we assign inside the HTML goes into any one of these two parts, based on preference that we made to display it on the head or body of the HTML.
Next comes to the head of the HTML which contains head contant of the webpage, <meta charset=”utf-8"> a variable width character encoding which is used for electronic communication. utf-8 derived from Unicode Transformation Format — 8 bit. This format is capable of encoding all 1,112,064 valid character code points in unicode. And also it contains a another element called title, which is used to name the website in the title bar.
And next comes the body of the HTML, it contains all the body contant of the webpage. In the following contant we will look through about the elements comprised in head and body.
I made this web developing project with comprised of
- Title
- Unorderes List
- Ordered List
- Images
- Hyperlinks to secondary webpage
Title is simple as we did for heading <title>Personal profile</title> with a closing tag at the end comes in the head part of the HTML.
Rest of the information comes inside the body part of the HTML. In this case, by opening paragraph element <p> I put name, designation, description and contact details with closing tag </p> with all required format functions like
bold for name using <strong>, instead of <b>
italic font for destination <em>, instead of <i>
These two <b> and <strong> functions same, bold the word, but the key difference is that <b> is physical way to bold a word,
whereas <strong> is logical way to bold a word.
Unordered List
I listed my skills set in the unordered list to display it in bullet point list.
I used <ul> requires closing tag element to list unordered list in bullet points. Each skill comes between <li></li> that specifies each line of the list.
Ordered List
Ordered list used to list the items in a ordered format by number, uppercase alphabet, lower case alphabet and roman letters.
By entering the ordered list element tag which takes an attribute to determine the order format. For example:
<ol type=“1”>, for numerical order
<ol type=“A”>, for uppercase alphabet order
<ol type=“a”>, for lowercase alphabet order
<ol type=“I”>, for uppercase roman order
<ol type=“i”>, for lowercase roman order
Inserting an Image
We can insert an image into the webpage from Internet and from local system file. By giving the image URL inside the attribute <img src=”image URL” alt=”my-image> or local system file path <img src=”file directory path” alt=”my-image> alt is alternate name to the image and also takes optional style width and height of the image to modify its dimensions.
Hyperlinks
By clicking the hyperlinked word in the webpage, takes you to the respective website or webpage if needed.
here <a> anchor element used for hyperlink a word or sentence in the webpage with an attribute named “href” contains the link to forward you to that link or another webpage that you created href=”link” and before closing the tag there we give the word or sentence to be hyperlinked in the webpage.
<a href=”http:…”>Email</a>, for external website
<a href=”filename.html”></a>, for user defined another webpage
I used both the type the hyperlinks in order to attached contact details and external online portfolio.
HTML elements are super easy to code and to create a simple document format website on myself. I’m very much excited to build my first ever website using HTML.
I have attached the link to the project on web development below
