HTML and CSS in a nutshell | Learn HTML and CSS

If you are new to the programming world HTML is something you should start from. HTML is not really a programming language though but getting to know it is a must have for anyone who wishes to make web applications.



This (not so)little guide/tutorial will cover most of the HTML and CSS and a little bit of HTML5 which would be more than enough to get you started with web development.

Lets start with complete basics.

HTML stands for Hyper Text Markup Language.
HTML is not a programming language, it's a mark-up language meant for defining and formatting web pages.
HTML can be combined with many different programming languages to achieve anything, literally.

CSS stands for Cascading Style Sheet.
CSS is used for defining the style of a webpage.

Let's skip the theory and move to practical.

Overview: 

Part I: Making a Simple HTML Page.

Part II: Learning various HTML tags.

Part III: Basic CSS.

Part I: Making a simple HTML page.

<html><head></head><body>Hello World!</body></html>

Copy the code above in a text file and save the text file as helloWorld.html
Make sure you have file extensions visible from the settings. If not, go to Folder Options > Views and uncheck "Hide file extensions."

Lets break and study different parts of this HTML file.

<html> : Marks the beginning of an HTML page.

<head> : Marks the beginning of an HEAD part of the page. Think of it like an HEADER portion of your webpage. Although you can define or write anything in it but the convention is to only include the HEADER's information in this. HEADER's information could be the TITLE of the webpage, Header image, heading and or menu of the page.

<body> : Marks the beginning of the BODY section of a webpage. This is where we do everything a web page contains. Paragraphs of content, images, forms and everything else you can think of. 

Hello World! : This is the content of a web page. Anything that goes inside the BODY tag is considered the content of the page. Now this content can further be formatted according to the need with various HTML tags which will be discussed below.

</body></head></html> : Marks the ending of respective tag. 


Part II: Learning various HTML tags.

<html>
<head>
<title>Holy Shit I made a WebPage</title>
</head>
<body style="background-color:#CCC; font-family:monospace;">
<i><h1 style="text-align:center;">Remember the name.</h1></i>
<h2 style="text-align:center;">This is so boring.</h2>
<h3 style="text-align:center;">No not really.</h3>
<h4 style="text-align:center;">How and why?</h4>
<h5 style="text-align:center;">What has this world come to.</h5>
<h6 style="text-align:center;">Yea you can't even see me now.</h6>
<p style="text-align:center;"><b>Today is fourth of April,</b> <em>two thousand seventeen</em>. This is a webpage made on <mark>Thinkpad</mark> by <strike>IBM</strike> Lenovo. <u>Did you know!</u> Thinkpad are the only laptop range approved to be used in ISS the International Space Station.</p>
</p><bdo dir="rtl">This is another line to text from right to left.</bdo></p>
<blockquote>There are seven billion people living on this Earth! Can you tell me what every single life is worth?</blockquote>
<h1 style="text-align:center; font-size:500%;">H<sub>2</sub>SO<sub>4</sub></h1>
<h1 style="text-align:center; font-size:500%;">K<sub>2</sub>Cr<sub>2</sub>O<sub>7</sub></h1>
<h1 style="text-align:center; font-size:500%;">(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</h1>
</body>
</html>


Take the code above into another HTML file and save it as you like and remember to add .html as it's extension.

Lets break and study different parts in BODY part of this HTML file.

<body style="background-color:#CCC; font-family:monospace;"> : In this body tag we have define a style component which is used for defining the CSS. In this particular case we are using In-line CSS(will be discussed later) which sets the background color to #CCC and font to monospace. #CCC is the HTML color notation you can use normal color names like BLUE, RED etc. as well. monospace is the font family and you can use any compatible font instead like Arial, Impact etc.

Headings Tag: 

<i><h1 style="text-align:center;">Remember the name.</h1></i> : In this part we made use of In-line CSS again to align the text to center of the page. <h1> tag states that the text between the tag is a Heading. Like wise we have H2, H3, H4, H5 and H6 sub-headings' tag.

By using <i> tag we make the heading italic. 
Similarly we have <b> tag to make text bold. 

<p style="text-align:center;"><b>Today is fourth of April,</b> 
<em>two thousand seventeen</em>. This is a webpage made on 
<mark>Thinkpad</mark> by 
<strike>IBM</strike> Lenovo. 
<u>Did you know!</u> Thinkpad are the only laptop range approved to be used in ISS the International Space Station.</p><p>
<bdo dir="rtl">This is another line to text from right to left.</bdo></p>
<blockquote>There are seven billion people living on this Earth! Can you tell me what every single life is worth?</blockquote> : In this part we wrote a paragraph. I'm pretty sure you can point out the bold part in this. 
Then we have <em> tag which stands for emphasize which emphasizes the text in between a little. I have never used it before, and I don't think you will either.
<mark> marks the text in between. Just like we use markers on books and papers. You cannot change the yellow color or mark tag.
<strike> strikes the text. Needs no further explanation.
<u> underlines the text in between.
<blockquote> stands for quoting a block of content like a paragraph. 
<bdo dir="rtl"> stands for Bidirectional Override. It is used to set direction of text. You can replace rtl with ltr which is actually the default. 

<h1 style="text-align:center; font-size:500%;">H<sub>2</sub>SO<sub>4</sub></h1>
<h1 style="text-align:center; font-size:500%;">K<sub>2</sub>Cr<sub>2</sub>O<sub>7</sub></h1>
<h1 style="text-align:center; font-size:500%;">(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</h1> 
<marquee><h1>Holy Shit!</h1></marquee> : In this part we have,

<sup> tag which stands for super script makes the text in between appear as super script.

<sub> tag which stands for Sub Script which makes the text in between appear as sub script.

<marquee> runs the text in between from right to left.


That's it.
Now the CSS.

Part III: Links and Images.

<html>
<head>
<title>Mind Blown</title>
</head>
<body>
<p>Image with height and width</p>
<a href="http://shiftescape.com">Click here to open my blog.</a><br/>
<img src="http://i.imgur.com/cqMnINb.gif" alt="Mind Blown" width="640" height="320"/>
</body>
</html>

Create another web page with the code above.
<a href="url-here"> tag is used to create anchor text links.
<br/> tag is used to break the line. You can use either from <br>, </br>, <br/> they all do the same work.
<img src="image-url-here" width="640" height="320"/> tag is used for embedding an image. The alt part stands for alternate text which is still optional and appears when the desired image is unavailable. width and height are speaking for themselves.


Part IV: Dictionary and Lists.

<html>
<head></head><body>

<dl>
<dt>Random Title</dt>
<dd>A random title is something that we make up to fill the title part.</dd>
<dt>Title Again</dt>
<dd>This is the description, yep, pretty small description.</dd>
</dl>

<ol type="i">List of Female DOTA2 Characters
<li>Mercurial</li>
<li>Lina</li>
<li>Rylai</li>
<li>Lanaya</li>
</ol>

</body></html>

Dictionary and list are just another way of representing data in form of lists.
Dictionary has <dt> as data title and <dd> as data definition.
When it comes to list, we have an ordered list <ol> which numbers the list content and unordered list <ul>.


Part V: Forms and Tables.

<html>
<head>
<title>Registration Form</title>
</head>
<body style="background-color:#CCC; font-family:monospace;">
<h1 style="text-align:center;">Register Now!</h1>
<form name="Registration Form" method="POST" action="demo_form.jsp" align="center">
<table align="center">
<tr>
<td>Select Username: </td><td><input type="text"/></td></tr>
<tr><td>Set Password: </td><td><input type="password"/></td></tr>
<tr><td>Gender: </td><td><select><option value="Male">Male</option><option value="Female">Female</option></select></td></tr>
<tr><td>Address: </td><td><textarea rows="5" cols="21"></textarea></td></tr>
<tr><td>State: </td><td><select><option value="">------------Select State------------</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
</select><br/><br/></td></tr>
<tr><td>Select Qualification: </td><td><input type="checkbox" name="B.Tech" value="B.Tech">B.Tech 
<input type="checkbox" name="M.Tech" value="M.Tech">M.Tech 
<input type="checkbox" name="MBA" value="MBA">M.B.A 
<input type="checkbox" name="Phd" value="Phd">Ph.D </td></tr>
</table>
<input type="submit" value="submit"> 
<input type="reset" value="clear"><br/><br/>
</form>
</body>
</html>

Lets break and study different part of this HTML file.

The code above is an example of a Sign Up form using HTML. 
The purpose of an HTML form is usually to take user data and pass it to a file that can save it or process it accordingly. In the example above we have 

<form name="Registration Form" method="POST" action="demo_form.jsp">

This form uses POST method and sends the data it collects to demo_form.jsp

To take an input from the user we use <input type="text"/>

To create a check box <input type="checkbox" name="Some name" value="Value">Some name

Likewise we have different input types for forms which you can find through google and on w3School website.

In the example above we are using a table to format and align the content of the form. 
The table has the following structure, always

<table>
<tr><th>Column Heading 1 |</th> <th>  Column Heading 2</th></tr>
<tr><td>Row 1, Column 1 |</td> <td>Row 1, Column 2 </td></tr>
<tr><td>Row 2, Column 1 |</td> <td>Row 2, Column 2 </td></tr>
</table>

The table below is made using the exact code above

               Column Heading 1  |    Column Heading 2
                   Row 1, Column 1  |    Row 1, Column 2
                   Row 2, Column 1  |    Row 2, Column 2


Part VI: Basic CSS.

This will cover only the basic aspects of CSS. No animation, no transition. 
By saying that I wanted to aware you of the power of CSS. 
CSS is a powerful means of designing and can be used for making interactive and beautiful web pages.

There are three ways of using a CSS with HTML. All three will result in similar outcomes. Difference comes in handling and memory consumption.
  1. In-line CSS
  2. Internal CSS
  3. External CSS

1. In-line CSS
When the style for an HTML tag is defined within the tag itself, it's called in-line CSS.
Eg. <h1 style="text-align:center;">Remember the name.</h1>


2. Internal CSS
When the style for an HTML tag and the page itself is defined in the HEAD section of the page using the style tag, it's called internal CSS.
Eg.
<head>
<style type = "text/css" media ="all">
body {
background-color: #CCC;
}
h1 {
color: #EEE;
margin-left: 40px;
}
</style>
</head>

3. External CSS
When the style for an HTML page is defined using an external CSS file.
Eg. <head>
<link rel="stylesheet" type="text/css" href="styleSheet.css" media="all"/>
</head>

 The code above in the HEAD section makes a link with the file stylesheet.css placed in the same folder as the HTML file.

 The content of styleSheet.css could be following.

 ////////////////styleSheet.css//////////////////
h1{
color: red;
}
p{
color: blue;

}
////////////////end styleSheet///////////////

You can define as many HTML components in the external CSS. 
If two HTML components are to carry the same properties, you can define them as

h1, h2, h3{
color: red;
}


To collectively apply some style to a part of html file, enclose the part in a DIV tag.

<div id = "myID"> <p><h1>... </p></div>
<div class = "myClass"> <p.....</p></div>

In appearance there is no difference in id and class made using CSS.

Classes in CSS are suffixed with a dot(.) operator and IDs can be suffixed with an hash(#) which is still optional.
Eg. 
myID{
background-color: red;
}

.myClass{
background-color: blue;
}
That's it.

Go explore, experiment.

Comments

Post a Comment