Getting started with Getting started with HTML
Complete list of all basic HTML Tags
Getting started with HTML
Introduction to HTML
This tutorial focuses on:
· What you should already know
· What is HTML?
· What HTML is NOT
What you should already know
Learning HTML does not require existing knowledge of other computer languages, all you need is to be familiar with using a text editor, web browser, and accessing the internet. Yup, those are all the things you will need to learn HTML and build webpages with it!
NOTE: If you would like to create some webpages right away, check out our first webpage guide. It contains step-by-step instructions for building very basic webpages. Be sure to come back to this section once you're done with that one.
What is HTML?
HTML stands for Hyper Text Markup Language and it is a language used to create webpages. There are many other web languages out there, but HTML is different. HTML is the core language of the world wide web, the fundamental building block of webpages. Without it, there are no webpages. It all starts with HTML - the simplest but the most important web language.
With HTML you make your own pages and decide what text, links, graphics, forms, as well as other elements will appear on them.
HTML is a markup language - a language that contains a set of tags (meaningful elements that describe or display data in some way). HTML is written using these tags to display content on webpages.
What HTML is NOT
HTML is a static language. This means that the content you display using HTML does not change, it is not dynamic. Things like popup boxes, moving images, and dynamically changing text CANNOT be done with HTML. HTML is used to place elements on a webpage, and that's it.
Dynamic content can be created with languages such as as Javascript,VBScript, and PHP. These languages are a bit advanced for a beginner so if you are new to the world of web development, please go through HTML first before moving on to them.
HTML is NOT used for styling. All the elements on a page are displayed with HTML but the styles for these elements (text color, background color, border color, etc.) are NOT set with HTML. For example, with HTML you set what text will appear on a page, but not the color and size of that text. To style the elements on a page, another language called CSS is used.
Web pages, the web, the internet, and you
This tutorial focuses on:
· Webpage uses
· The world wide web
· The HTTP protocol
· The HTTPS protocol
· How it all comes together
Webpage uses
What is the use of a webpage? You might be thinking it's obvious - to show some information about something to people online. That's the fundamental use of web pages, but it gets more specific.
With webpages you can:
1. Promote your business
If you run a business and you're not selling things online already, than you are probably losing profit! Get your business online and let the world know about it with a webpage!
If you run a business and you're not selling things online already, than you are probably losing profit! Get your business online and let the world know about it with a webpage!
2. Promote your self
Whether you're a freelancer of some kind (graphic designer, writer, journalist, etc.) or want to keep an online journal (blog), a webpage is a great way to let the world know about yourself and what it is that you do.
Whether you're a freelancer of some kind (graphic designer, writer, journalist, etc.) or want to keep an online journal (blog), a webpage is a great way to let the world know about yourself and what it is that you do.
3. Review a product
Did you buy a product and really like it? Does it have great features? Or maybe it really sucks? Whatever your feelings on a product, you can use a webpage to inform others about it.
Did you buy a product and really like it? Does it have great features? Or maybe it really sucks? Whatever your feelings on a product, you can use a webpage to inform others about it.
The world wide web
This 'world wide web' everyone keeps talking about. What exactly does that term mean? A common misconception exists that the term 'world wide web' is a synonym for the internet. In reality, the world wide web is only a part of the internet.
Concept
|
Purpose
|
World wide web
|
The part of the internet by which webpages and the content on those webpages such as sounds and images are transferred to users who send requests for these resources. All this data (the data of a website) is stored on a special computer known as a web server. A user requests this data through their web browser, the web server gets the request, and sends it to the user's web browser
|
Internet
|
An abbreviation for 'internetwork', the global communications system which links together various computer networks around the world allowing for communication between devices and people on these networks. This global system, thisinternetwork, uses various different protocols to allow for the communication between devices and people on different networks. There are protocols for everything - the FTP protocol for remote file transfer, the SMTP protocol for email, and the HTTP protocol for the web.....
|
The HTTP protocol
HTTP stands for Hyper Text Transfter Protocol. It is this protocol that is used to transfer data across the world wide web. Every time you enter a websites URL in your web browser (ex. www.yahoo.com), your web browser is making use of the HTTP protocol to send your request for a webpage (or any other web resource such as an image) and then transfers the data to you. The data for a website is stored on a computer called a web server.
The HTTPS protocol
While HTTP is used to transfer data across the world wide web, there is another protocol which works just as HTTP does, but adds a layer of security. This protocol is the HTTPS protocol. HTTPS stands for Hyper Text Transfer Protocol Secure. HTTPS is used to encrypt communication between a web browser and a web server. HTTPS is often used on websites that need to provide private communication such as online stores and membership sites. Next time you are making a purchase from an online store look at your web browsers address bar, the beginning part of it should say HTTPS.
How it all comes together
1. Internet = An abbreviation for 'internetwork'. The global communications system which links together various computer networks around the world allowing for communication between devices and people on these networks.
2. World wide web = The part of the internet by which webpages and the content on those webpages such as sounds and images are transferred to users who send requests for these resources
3. HTML = Language used to create web pages
4. HTTP and HTTPS protocols = Protocols by which data is transferred across the world wide web
5. You = Web page author who uses HTML to create webpages that will be transferred across the world wide web on the internet through the HTTP and HTTPS protocols
Getting started with HTML
Before we dive into HTML basics, lets have a quick overview of some important things you need to know.
This tutorial focuses on:
· HTML file extensions
· Text editors
· Web browsers
File extensions
If you open a program on your computer, it will have a .exe extension (If you're using Windows), when you open a document created with Microsoft Word, it will have a .doc extension, and so on. This extension system is a way to organize files by type so you know how to work with each one.
Webpages you create with HTML are no exception to this rule and must have a specific extension - HTML documents have a file extension of .htm or .html
In the past, the .htm extension was used because of older operating systems which limited file extensions to three letters. Noawadays, the .html extension is mostly used.
Text editors
You are going to need two two things to create webpages and view them, the first of which is a text editor. You will use a basic text editor to write your HTML code.
The text editor you will be using (as a beginner) to build your pages is notepad. To access notepad, go to your Start menu -> Click on Run -> type notepad and press Enter. The notepad text editor should come up.
The other thing you will need is a web browser...
Web browsers
A web browser is a program used to view webpages (you're using a web browser right now!) The most popular web browser is Internet Explorer. Some other well known browsers include Firefox, Safari, Opera, andChrome.
Just as you view pages created by other people using a web browser, you will view pages that you create using a web browser as well.
Get your tools ready and lets begin learning actual HTML at our HTML basics tutorial.
HTML basics
This tutorial focuses on:
· Tags
· Attributes
· Elements
· Comments
Tags
Using tags, the browser knows which content to display and when.
· Tags are sorrounded by < and > symbols (called angle brackets)
· Most tags in HTML have an end tag, some do not
There are tags for many different things including text, links, images, tables, form elements, and much more. When your situation requires it, use the tag(s) you need. For example, to display italic text you would use the <i> tag.
Example:
<i>this text will be italic</i> and this text will not
Output:
This text will be italic and this text will not
In the above example, once we no longer need to display italic text, we used the complementary end tag for the <i> tag which is </i>. The end tag is the same as the opening tag but with a / character after the first angle bracket.
Common HTML tags with their closing tags:
<p>paragraph text</p> (used for paragraphs) <h1>heading text</h1> (used for headings) <body>page content</body> (used to display the content of a webpage) <head>page info</head> (used to store information about a webpage such as the page title)
Some tags (very few) do not have a closing tag. With such tags, you would use the / symbol at the end of the tag (right before the > symbol) instead of using a closing tag.
Tags without a closing tag:
<br /> (short for break, used to display line breaks on a page) <img /> (short for image, used to display images on a page) <input /> (used to display form fields)
NOTE: ALL Tags should be kept lowercase! This is the modern HTML standard.
Remember that HTML has lots of tags for many different things! You will be learning all about the various HTML tags throughout our HTML tutorials. It's going to get exciting :)
Attributes
Tags are used to display content but what about the specifics of that content like if a link should open in a new window or the location of an image? Attributes are used to specify things like this regarding the content on your webpages. Attributes are located within tags.
NOTE: Attributes are located in start tags only, not in end tags.
Example:
<a href="http://www.yahoo.com" target="_blank">Yahoo!</a>
Output:
The tag from the above example (<a>) is used for displaying links. Thehref attribute sets the link to point to http://www.yahoo.com and thetarget attribute sets where the link will open (in this case, a new window).
Attributes are specified with special keywords relative to the tags they're placed in and take the value that you set. Do not worry right now about specific uses of attributes for different tags like in the above example, various attributes as well as the tags they are used in will be discussed in detail in further tutorials in this section. The important thing for now is that you understand the concept of attributes.
Attribute rules:
1. Always quote attribute values
2. Use lowercase letters for attributes and attribute values
Elements
An element is anything that appears on a webpage. An element could be a table, a link, a textbox, a heading, etc. The paragraph you're reading right now is an element and so is the heading right above it.
An element consists of the grouping of a start tag, the element content, and an end tag.
Element example:
<h1>This is a heading element</h1>
Output:
This is a heading element
Element parts from the above example:
<h1> - start tag This is a heading element - element content </h1> - end tag
What about tags that don't have an end tag? How do they fit into the whole element scheme?
Tags that don't have an end tag are the element. For example, the <img> tag which is used to display an image doesn't have an end tag but the image it displays is the element.
Example using the <img> tag:
<img src="images/sky.jpg" />
Output:
As you can see in the above example, the <img> tag is the element. It just needs the right value to be set for it's src attribute to display the image.
Elements within elements
Elements can also have other elements within them.
Example:
<p>Here is a <a href="http://www.google.com">link</a> </p>
Output:
Here is a link
In the above example, we have a link element (<a>) nested inside of a paragraph element (<p>)
Comments
Comments don't affect the code and will not be displayed on a page but serve an important purpose - they are declared so that code would be easier to understand and navigate.
Comments are used to explain what is happening in the code and this is very useful in many situations like if you come back to your code after not working on it for a while or if you start working with someone else's code. Comments simplify things and create better organization allowing you to work faster and more efficiently.
Comments can be placed anywhere within the code, can span as many lines as you want, and are declared with a starting <!-- and an ending -->
Example:
<!-- get the users first name --> <input type="text" name="name" />
Output:
Notice how in the above example only the textbox appears, not the comment, but the comment makes it clear what the purpose of the textbox is.
NOTE: Using too many comments could slow your pages down!
A complete HTML document
This tutorial focuses on:
· The core setup
· HTML document head
· HTML document title
· HTML document body
· An entire HTML document
The core setup
It all begins with the <html> tag. This tag signifies the start of a webpage. You must always begin your HTML code with this tag and all the other tags will go between <html> and it's closing tag </html>
With that said, let's begin building:
<html> </html>
HTML document head
The head section of an HTML document will actually not appear on a webpage but contains important information about the page such as the page's title and styles that will affect the page. The head section is set with the <head> tag which comes right after the <html> tag and the information about the page will go between <head> and it's closing tag </head>
Moving on:
<html> <head> </head> </html>
HTML document title
The page's title is set with the <title> tag . The title can be seen in the top left corner of the web browser. If you look at the top left corner of your web browser window right now, you will see the title "Building an HTML document", as that is the title of this page. The <title> tag goes inside the <head> tag.
You can give your pages any title you want, but remember that the best titles are short and straight to the point.
Giving the page a title:
<html> <head> <title>HTML is cool</title> </head> </html>
HTML document body
The body section of an HTML document is where all the content is placed that will be seen on the page. The body section is set with the <body> tag which comes right after the <head> tag and the page's content will go between <body> and it's closing tag </body>
Page body:
<body> Here is some text that will be seen on the page </body>
An entire HTML document
Piece-by-piece we have created an entire HTML document, very basic but it will do!
The entire code:
<html> <head> <title>HTML is cool</title> </head> <body> Here is some text that will be seen on the page </body> </html>
Focus on the structure of the above HTML document, understand it, memorize it. This same structure will apply to the code of all of the pages you will build, no matter how simple or complex. Also remember to always close tags in the right order like in the above example!
Now that you know fundamental HTML concepts and how to build a basic webpage, it's time to learn about working with text in HTML. Continue onward to our HTML text formatting tutorial!
No comments:
Post a Comment