TechoYO: Explore Computer Science.: September 2012

Monday 24 September 2012

Basic type of lists:

1.Ordered list

2.Unordered list

An ordered list:

The first list item
The second list item
The third list item

An unordered list:

List item
List item
List item

The <img> tag and the src attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

The alt attribute:

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The value of the alt attribute is an author-defined text:

Set height and width

The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:

Align attribute:

Align attribute can be used with images. eg. align="bottom"

Thursday 20 September 2012

The HTML <head> Element

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

The HTML <title> Element

The <title> tag defines the title of the document.

The title element is required in all HTML/XHTML documents.

The title element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results

HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

To create a link to another document, by using the href attribute
To create a bookmark inside a document, by using the name attribute

My Story

Have you ever thought of building the next BIG THING to facebook or google on the web?
I have! And that is why I'm here, learning(and helping you learn) web development stuff.

What actually made me aim for it is the history of the facebook. It has been quite sometime since I saw 'The Social Network' (immediately after which I got the urge) and I'v just started putting in effort to make my dream come true. I've watched the movie 12 times now and I'm definitely not bored yet. Mark Zukerberg is such an inspiration!
I recommend all o' u to read this at least once..If you've not seen the movie.: http://en.wikipedia.org/wiki/History_of_Facebook

GET MOTIVATED..GET TO WORK! :)

The Million dollar website

Recently, I came across this post while surfing the web and it was truly motivating. That is why I decided to share it on the blog. :)

CLICK HERE:

Building a million dollar website

Styling in HTML

Inline Styles

An inline style can be used if a unique style is to be applied to one single occurrence of an element.

To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:

This is a paragraph.

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
A paragraph.
</body>

</html>

HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

CSS style sheets can also be used..which we'll see later in the CSS tutorial!

Saturday 15 September 2012

HTML text formatting

Text formatting refers to the act of making text on the web page appear as desired. eg., making text italics, bold etc.

<!DOCTYPE html>
<html>
<body>

This text is bold
This text is strong
<big>This text is big</big>
This text is emphasized
This text is italic
This text is small
This is subscript and superscript

</body>
</html>

This is how the output will appear:

This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This is_subscript and ^superscript

Pre-formatted text can be displayed using the tag <pre> </pre>. Text inside these tabs appear as such (with the same style) in the webpage.
Abbreviation tag:
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
on moving the cursor over WHO on the browser, u'll see the abbreviation appear.

Quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

</blockquote>

Note: The browser inserts white space before and after a blockquote element. It also inserts margins.

A short quotation:

<q>This is a short quotation</q>

Note: The browser inserts quotation marks around the short quotation.

Output:

A long quotation:

This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

Note: The browser inserts white space before and after a blockquote element. It also inserts margins.
A short quotation: This is a short quotationNote: The browser inserts quotation marks around the short quotation.

Friday 14 September 2012

Link and Image basics in HTML

HTML Links

HTML links are defined with the <a> tag.

Example:

HTML Images

HTML images are defined with the <img> tag.

Example:

Note: The filename and the size of the image are provided as attributes.

You give the path of the image in "quotes".

We'll learn more about these tags as we go deeper..sometime later. :)

How to make your HTML code work?

This is how you execute a HTML code:

Open a text document (eg. using notepad)
Type your code.
File -> Save As -> Save the file as "filename.html". (not .txt)
Open the file using your browser.
Your first web page is ready! :)

Getting started with HTML

This is how a basic html code looks:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

My first paragraph.

</body>
</html>

Things between the <html> and </html> tags constitute the instructions to the browser.
Items within the <body> and </body> define the appearance of a webpage.
<h1>Is the heading tag</h1>
contains a paragraph.

OUTPUT:

tag

Thursday 13 September 2012

The Basics

A web developer is a programmer who specializes in, or is specifically engaged in, the development of World Wide Web applications, or distributed network applications that are run over HTTP from a web server to a web browser.

Modern web applications often contain three or more tiers, and depending on the size of the team a developer works on, he or she may specialize in one or more of these tiers - or may take a more interdisciplinary role. For example, in a two person team, one developer may focus on the technologies sent to theclient such as HTML, JavaScript, CSS, and on the server-side frameworks (such as Perl, Python, Ruby, PHP, Java, ASP, .NET, .NET MVC) used to deliver content and scripts to the client. Meanwhile the other developer might focus on the interaction between server-side frameworks, the web server, and adatabase system. Further, depending on the size of their organization, the aforementioned developers might work closely with a content creator/copy writer, marketing advisor, web designer, web producer, project manager, software architect, or database administrator - or they may be responsible for such tasks as web design and project management themselves.