Table of contents
Let's start with the following code snippet.
In earlier days, when the internet is getting famous there were several types of documents which are going to upload or simply display on the browser. For the browser to understand which document is going to be rendor, first line in code <!DOCTYPE html> is written.
To specify language of the element(data written inside tags), lang attribute is use with langauge abbriviation. For example: English = en
Structure of HTML code:
A simple web page can be design by using two secions, head and body.
1) Head : Mostly <head> part contains meta data which is not visible on web page. There are two things which are visible from head tag, that are title and icon. <Title>My web page</Title>
2) Body: In <body> part we have to place everything which we want to display on web page. We can use several tags to display information on web.
Tags in HTML:
i) H1, H2 : This are heading tags. Each comes with specific font size. Font size of H1 is greater than H2. This two tags by default comes with new line.
ii) p : Its a paragraph tag. We can print block of text using <p>. Unlike h1 it doesn't comes with new line. We need to use <br> tag to shift on new line.
iii) img : As name refers <img> is use to show image on web page. It comes with different options. Default one is <img src="" alt="">, where src is source of image file(URL). "alt" is provide name to image. For example if we miss to attach image or misstype scr path, we can easily get to know from web where we are missing. Following picture can dipict clearly.
Here "code image" is value of "alt" and it is shown in the absence of real image.
iv) a : <a href=""> is user to create hyperlink(Navigate to another web page). Value of href should be path of another html file to which we want to navigate.
All this tags are elements of html page and these elements have some attributes. One of the attribute which i came accross is "title" which is working as tooltip.
Syntax to add attributes on tag: <h1 title="heading 1">This is heading 1</h1>
Something about server and plugins
Apache Server: Server is nothing but a software that delivers content to web. Apache is open source is free.
Emmet: It is very useful to code faster. It provide many shortcuts. One of the feature i like most is "Lorem". It is basically use to print n number of random words. Syntax: Lorem10. This will print 10 random words.
