Welcome To My Blog
Tuesday, 9 July 2013
Saturday, 6 July 2013
HTML Tutorial Day 2
HTML Elements
When you land on a website, all the items you see in front of you -- the paragraph texts, the page banners, and the navigation links are all elements of the web page. The term element is a just a name given to any piece of a web page. Many HTML elements are actually invisible to visitors and work quietly behind the scenes to provide web crawlers and search engines useful information about the site.
When you land on a website, all the items you see in front of you -- the paragraph texts, the page banners, and the navigation links are all elements of the web page. The term element is a just a name given to any piece of a web page. Many HTML elements are actually invisible to visitors and work quietly behind the scenes to provide web crawlers and search engines useful information about the site.
An element consists of three essential pieces: an opening tag, the content, and a closing tag.
- <p> - opening paragraph tag
- Element Content
- </p> - closing tag
A Complete HTML Element
<p>Once upon a time...</p>
A single page can contain hundreds or thousands of elements, but when all is said and done, every HTML page should have a bare minimum of four critical elements: the HTML, head, title, and body elements.
<html></html>
<html> is the element that begins and ends each and every web page. Its sole purpose is to hold each web element nicely in position and serves the role of book cover; all other HTML elements are encapsulated within the <html> element. The tag also lets web browsers know, "Hey, I'm an HTML web page!", so that the browser knows how to render it. Remember to close your HTML documents with the corresponding </html> tag to signify the end of the HTML document.
If you haven't already, it is time to open up Notepad, Notepad++, or Crimson Editor and have a new, blank document ready to go. Copy the following HTML code into your text editor.
HTML Element Code:
<html>
</html>
Now save your file by selecting - Menu and then Save. Click on the Save as Type drop down box and select the option All Files. When you're asked to name your file, name it - index.html. Double-check that you did everything correctly and then press - Save. Now open your file in a new web browser so that you have the ability to refresh the page and see any new changes.
<head></head>
The <head> is usually the first element contained inside the <html> element. While it is also an element container that encapsulates other HTML elements, these elements are not directly displayed by a web browser. Instead they function behind the scenes, providing more descriptive information about the HTML document, like its page title and other meta data. Other elements used for scripting (JavaScript) and formatting (CSS) are also contained within the <head> element, and we will eventually introduce how to utilize those languages. For now, the head element will continue to lay empty except for the title element, which will be introduced next.
Here's a sample of the initial setup.
HTML Head Element Code:
<html>
<head>
</head>
</html>
If you've made the code changes and refreshed the browser page, you will notice that we still have nothing happening on the page. So far, all we've done is add a couple of necessary elements that describe the web page document to the web browser. Content -- the stuff you can see -- will come next!
<title></title>
The <title> element adds a title to a web page. Web page titles are displayed at the top of any browser window or at the top of browser tabs. They are probably the first thing seen by web surfers as pages are loaded, and web pages you bookmark are saved using the web pages' titles.
A proper title makes a good first impression, and any page caught without a title is considered unprofessional, at best.
HTML Title Element Code:
<html>
<head>
<title>First Page</title>
</head>
</html>
Save the file and refresh the browser. You should see "My Web Page!" in the upper-left bar of your browser window.
Name your webpage as you please. Just keep in mind that the best titles are brief and descriptive.
<body></body>
The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of a web page is the <body> element. We will be looking at each of these elements in greater detail as the tutorial progresses, but for now, it's only important to understand that the body element is one of the four critical web page elements, and it contains all of the page's viewable content.
HTML Body Element Code:
<html>
<head>
<title>First Page</title>
</head>
<body>
<p>Once upon a time...</p>
</body>
</html>
Go ahead and view your first complete web page.
HTML Elements Reviewed
To recap quickly: we've laid out a set of four essential elements that are used to create a strong foundation and structure for your web page. The <html> element encapsulates all page content and elements, including two special elements: the <head> and <body> elements. The <head> element is a smaller container for elements that work behind the scenes of web pages, while the <body> element houses content elements such as web forms, text, images, and web video.
From here on out, the examples we provide will assume that you have a firm understanding of these key elements and know to place the majority of your HTML code inside of the <body> element.
Friday, 5 July 2013
HTML Tutorial Day 1
HTML
HTML Background
HTML hasn't been around for many years. The first web pages began in November 1990, and back then, there were little to no HTML standards to follow. As a result, a group called the World Wide Web Consortium formed to set standards for coding HTML. We will base our teachings around these widely-accepted coding standards.
Web Pages
Html stands for (Hypertext Markup Language)
Welcome to Learning Goods HTML Tutorial! Here you will learn the basics of Hypertext Markup Language (HTML), so that you may design your own web pages like the one you are viewing right now!
HTML is not a programming language, but rather a markup language. If you already know XML, HTML will be a snap for you to learn. We urge you not to attempt to blow through this tutorial in one sitting. Instead, we recommend that you spend 15 minutes to an hour a day practicing HTML and then take a break to let the information settle in. We aren't going anywhere!
Html Preparation
If you are new to HTML and haven't read through our Beginner's Tutorial, please take a few minutes to complete that tutorial before moving on.
Creating an HTML document is easy. To begin coding HTML, you need only two things: a simple-text editor, such as Notepad, and the dedication to follow this tutorial! Notepad is the most basic of simple-text editors, and you will probably code a fair amount of HTML with it in your early stages. Notepad++ is another popular favorite among web developers. These innovative text editors are specialized for writing simple code and they utilize color coding to help you write concise code.
HTML Background
HTML hasn't been around for many years. The first web pages began in November 1990, and back then, there were little to no HTML standards to follow. As a result, a group called the World Wide Web Consortium formed to set standards for coding HTML. We will base our teachings around these widely-accepted coding standards.
Web Pages
Here are some important facts about why web pages are so useful!
- They are a low-cost and easy way to spread information to a large audience.
- The provide yet another medium you can use to market your business!
- They serve as a platform to let the world know about you!
Ward those you have to know
Throughout this tutorial, we will be using several terms that are unique to HTML. It is important for you to understand what these words mean, in the context of HTML.
- Tag - Used to tag or "mark-up" pieces of text. Once tagged, the text becomes HTML code to be interpreted by a web browser. Tags look like this: <tag>
- Element - A complete tag, having an opening <tag> and a closing </tag>.
- Attribute - Used to modify the value of the HTML element. Elements will often have multiple attributes.
For now, just understand that a tag a piece of code that acts as a label that a web browser interprets, an element is a complete tag with an opening and closing tag, and an attribute is a property value that customizes or modifies an HTML element.
Subscribe to:
Posts (Atom)
