HTML AND CSS: GETTING STARTED

I was assigned to make my own HTML code to see how far I’ve known regarding to this field. So ok then! I start with the BASICS — it’s where a newbie should always start with. I studied it using the internet and after a couple of hours, I can now define and make my own HTML page. I’ve learned:

What is HTML?
HMTL stands for Hypertext Mark-up Language and is often used to make or create web pages. HTML is a subset of Standard Generalized Markup Language (SGML) and is specified by the World Wide Web Consortium (W3C).

What is needed to start with HTML?
Nahh! Do not think of any softwares or programs, a simple TEXT EDITOR and an offline BROWSER will do! (but being online is way much better).

How to make one?
Open an empty TEXT EDITOR (click Applications, hover to Accessories then click to gedit Text Editor). Type this codes:

<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Hurray! You got your own page! Clap 10x</p>
</body>
</html>

Created an HTML file
Save the file as html_tutorial.html. Go to the file where you have saved it. Run the file through your browser. Then hurray! You got your own web page! :D

Explanation of the code above:
HTML is compose of ‘tags’. An opening tag ‘<’ and a closing tag ‘>’. They specify what portion of your code will display and where to display it. All HTML codes should at least contain the three(3) main tags and also in that order.

The html element contains all the tags inside it (except for the doctype tag). Next is the head tag, this is where most of the not viewable codes are putted in like script codes. Another is the body tag, it’s where most of the content codes of your page are compiled.

Hey I also make mine. Check this out:

Not that good coding isn’t it? And for that matter, Sir Henyo taught me how to make this codes simple yet elegantly good looking — we now move to CSS.

What is CSS?
Cascading Style Sheets. CSS  specify fonts and font size, background images, adding colors, classes, IDs, float, layers, positioning, embedded style sheets, external style sheets, and more. CSS is used to control the style and layout of multiple Web pages all at once.

Why do I need to know that?
Honestly, it’s up to you but it is really needed to save a lot of time, particularly when maintaining a large site. It also gives user a faster download times for it has less code. And the most important thing of all – CSS has a much wider array of attributes than HTML.

A CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property, and a value.

SYNTAX:

selector { property: value }

The selector is often the HTML element that you want to style (eg. h1, h2, h3, footer, header). We can apply a style to many selectors if you like. Just separate the selectors with a comma.

body, header, footer {background-color: black}

To apply more than one property separate each declaration with a semi-colon.

body {background-color:black; font-size: 100%; font-family: arial, helvetica, "sans serif";}

NOTE: ALWAYS MAKE IT READABLE! It is for future editing purposes. Make it easier to edit it in times that we want to. See below.

body {
background-color:black;
font-size: 100%;
font-family: arial, helvetica, "sans serif";
}

After applying CSS together with my HTML code above, the result is this:

Now compare the difference between my HTML and CSS coding.

 Original post by Juno Elquiero

 

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: