Intro to Apache Server and HTML | day1 blog
Intro to Web
Web connects billions of clients and servers to communicate. Client and server communicates and share things through web. The web server receives the request, finds the resources and return the response to the client. A client sends request to server through a browser and gets respective response from server in a particular format.
The server often sends response in HTML(Hyper Text Markup Language). Browsers is the thing which enables user to interact with server and get content they want, like images, text, HTML pages, graphics etc.
Apache Webserver
Apache is the most widely used web server software which is an open source software available for free. Apache is a power full, reliable, and secure one. It can be installed on all operating systems like Linux, Windows, Unix, FreeBSD, Solaris, Mac OS X etc. It provides complete source code and comes with an unrestricted license.
Apache breaks down the functions into multiple units. we can say individual units which means individual virtual hosts. We can host multiple individual domains on an single server which is one of the best feature of apache server.
Apache server by default loads a page...
Live Server VS code
It is also like a server that host content, but It is a peace of code that helps developers to see the instant results of their code and help write changes to the code. It is very useful plugin that saves a lot of time for the developers to not to load and refresh the page every time the code modification to the web page.
There are a lot of live server plugins that can do the same work but in different names..
About HTML
HTML stands for Hyper Text Markup Language. It is a Markup language used by the browser to manipulate text, images, and other content, in order to display it in the required format. HTML is a series of collection of elements which is used to design web pages. The elements of HTML tells the browser how to represent the content.
There would be two main parts in any HTML document. Initially a line tells the type of the document to the browser. In case of html
<!document html>
And then head and body are the two main parts that we can see in a HTML file. Mostly the content in inside the head part is not visible mostly, but maybe in some particular cases. Body part contains the most of the content which we can see on web page and header tags to represent content in a structures and to add some additional attributes.
HTML doc structure
<html>
<head>
......This is Head tag part.....
</head>
<body>
<h3>This is Body part of html</h3>
</body>
</html>
Some basic HTML tags
#< H > Elements
Let's start with basic one tags. There are 6 'h' tags from 'h1' to 'h6', where 'h1' is the elder one and is widely used for Main headings. The size of the font decreases as the number next to 'h' decreases. In that way the 'h6' is smallest brother tag among the 'h' tag brothers. The size of text represented by each tag depends on your browser.
This is a h1 tag
This is a h2 tag
This is a h3 tag
This is a h4 tag
This is a h5 tag
This is a h6 tag
>>Attributes
This don't take any attributes except Global attributes which are common for all HTML elements.
#< p > Element
This tag is used to write paragraphs and huge content. It starts with < p > and end </ p> represents the end of the paragraph or that section.
<body>
<p>This is a paragraph ....lab lab......... </p>
</body>
>>Attributes
This tag also don't take any attributes except Global attributes.
#Lorem ipsum
Meaningless text that is specially generated for filling pages while developing site design is called Lorem ipsum. The lorem tag inserts a specified amount of random text in lower case letters. Lorem is very famous to generate random text to fill web page while developing and experimenting the view how any text inserted in that field looks like.
Usage in VS code
To use lorem in VS code TYPE lorem10 and tab key to get 10 random word of lorem. We can type any number after keyword 'Lorem' which represents the count of words we want fill.
#Anchor Element < A >
<a href="./Link_address_Here.png" > This is an image</a>
Output :
>>Attributes
download This causes the browser to treat the linked URL as a download. Can be used with or without a value.
<a href="" download="./Link_address_Here.png" > This is an image</a>
href Holds the URL to redirect on click.
- tel: Mobile number here
- mailto: email here
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
<a href="tel:+123456789">Call Now </a>
hreflang Hints at the human language of the linked URL.
target It tells the browser whrer to load the URL on click. there are fue Default values for this attribute with respective effect.
Rrefer to Mozilla developer document for more details..
Documents
