Have you ever think about creating a website ? Unless then this
is for you. I hope after the next few minutes you'll be a web
designer.
HTML (Hypertext Markup Language) & CSS (Cascading Style Sheets) are two of the internet’s most used web development languages, its greatest translators and presenters of information.HTML provides the structure of the page where as CSS the (visual) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web page and Web Applications.
Contents:
- <!DOCTYPE html>
- <html lang="en">
- <head></head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="css/main.css">
- <title>Start Programming as a Beginner</title>
- <link rel="icon" type="image/png" href="favicon.png">
- <body>
- <header>
- <nav>
- <main> and <footer>
What is HTML?
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc
What is CSS?
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
-
External stylesheets are stored in CSS files
Lets Begin
Choose a perfect IDE (Integrated Development Environment)
We need an application that takes our typed HTML text and provide various automated tasks. Auto-completing the syntax of code, supplying a list of possible values to an attribute or to increase readability. All for the sake of simplifying or rather speeding up the process of coding we need IDE.
Best IDEs
There are many, IDEs available to use out there with various pros and cons but for
simplicity, I will mention four :
Brackets
,
Visual Studio Code (VS Code)
,
Sublime Text
and
Atom
. All free to use software.
If you want to know more features about these IDEs please
click here
Brackets
Atom
Personally I would suggest Visual Studio Code, because it is
completely free, by Microsoft, lightweight and open source.
<!--lets see a basic HTML,-->
Personally I would suggest Visual Studio Code, because it is
completely free, by Microsoft, lightweight and open source.
1 <!DOCTYPE html>2 <html lang="en-IN">3 <head>4 <meta charset="utf-8">5 <meta name="viewport" content="width=device-width, initial-scale=1">6 <link rel="stylesheet" href="css/reset.css">7 <link rel="stylesheet" href="css/main.css">8 <title>Start Web Designing as a Beginner</title>9 <link rel="icon" type="image/png" href="favicon.png">10 </head>11 <body>12 <header>13 <nav></nav>14 </header>15 <main></main>16 <footer></footer>17 </body>1819
/HTML CODE BLOCK
<!DOCTYPE html>
This declares the html file as an html 5 document and it instructs the browser about which version of html the page is written in.<html lang="en-IN">
This defines the language the html document is written in.<head></head>
A container for all head elements. Which includes but isn’t limited to, a title for the document, scripts, styles and meta information.<meta charset="utf-8">
This specifies the character encoding for the HTML document. UTF-8 Character encoding for Unicode.<meta name="viewport" content="width=device-width, initial-scale=1">
Definitely going to need this line of code if you intend on building media query responsive web pages(switch between various devices & resolutions).<link rel="stylesheet" href="css/reset.css">
Links to the reset.css stylesheet which will be used to reset all margins, paddings, headers…etc. to 0 for cross browser styling. CSS Reset Sheet can be downloaded here .<link rel="stylesheet" href="css/main.css”>
Links to custom made CSS stylesheet.<title>Start Web Designing as a Beginner</title>
Title of the web-page as displayed in the browser’s tab associated with the html file.<link rel="icon" type="image/png" href="favicon.png">
Provides a file reference to an image that serves as a tab icon(favicon) within the browser.<body>
The <body></body> tag encompasses the actual content of the HTML page.
<header>
The<header></header> tag, which can be used multiple times within various elements, contains the top-level elements, or rather the more important elements within its parent container. The
<body></body> element is the parent container for the
<header>
</header> element.
<nav>
The<nav></nav> element contains all navigation-related elements, those usually placed at the top of a page.
<main> and <footer>
The <main></main> element tag encloses all of the page’s main content and the
<footer></footer> tag holds all other relevant information about its containing element (the
<body></body> element in this case). Just like the <header></header> tag the
<footer> tag can be used multiple times but within different parent container elements.
Now you saw the very basic HTML for more guides, tricks, tutorials,
courses, creative codes (i.e copy and paste codes) please follow
us.
Comments