The Step-by-Step Process of Making a Website
Look around the Internet, and you'll see a myriad of different websites. Some are designed excellently with the user in mind at all times while some are designed shabbily without much thought, planning or care. If you want to create your very own website and join the ranks of the numerous website owners and designers, what should you do? How should you go about it?
If you're a total noob at this endeavor, then you've come to the right place! Start your journey from merely reading and visiting websites to becoming an actual web designer right here. While it may seem a bit daunting at first, you'll quickly learn that making a website isn't that hard...once you know how to approach it (as with everything else).
Here's what you need from start to finish to create your own website. We'll start at learning the fundamentals of HTML in this opening lesson.
Right away, there are noticeable differences between this image tag and the aforementioned tag. There is no ending tag since the img tag is actually self-closing, if you will. It doesn't require a closing tag since there is nothing that would need to be placed in between a starting and closing tag. Nonetheless, you'll note the presence of the forward slash before the last greater-than sign. That's simply there to denote the end, a nod to what's considered proper form as far as HTML is concerned. It's there to please the purists!
Fundamental HTML Structure
It's the perfect time to jump right into HTML structure since you now know about tags. In its simplest representation, HTML structure includes HEAD as well as BODY tags. The former expresses information that won't necessarily show up directly on the webpage itself. Examples are CSS styles, the actual page title (which you know better as the tab or window title on the browser) and additional kinds of metadata.
On the other hand, the BODY tag will express any information that is going to show up on the webpage. Examples of this can include any images, your text and also rich media.
A BODY tag usually contains different elements within it. It's not unusual to see this tag with a DIV tag that has a header ID. The purpose of DIV tags is to hold bits of content, so that it's possible for you to both move them around and style them by using CSS.
It's also possible to fit text into your header DIV tag. You can place the first part of this text inside of an H1 tag. H1 belongs to a whole family of tags - H1, H2, H3, H4, H5, and H6 - that is used to make header text. H1 is the biggest while H6 happens to be the smallest. By default, these create bigger and bolder text, yet it's up to you how to style them when you use CSS. If an HTML document features no CSS-style information, then the H1 tag is just going to make the text on a webpage appear in bold.
So-called "un-styled" text can also appear in an HTML document. The rule among many browsers is to simply render this kind of text in Times New Roman and in size-12 font. If you begin to incorporate CSS styles, you have the luxury of styling this text any which way you want by picking a default style.
Now You Enjoy a Sound Web-Building Foundation
Thanks to this opening lesson, you now possess enough rudimentary knowledge of HTML to start to make sense of the bare essentials of HTML. This is your first step to being able to create a website all on your own! To be sure, all this HTML can look quite intimidating to the beginner, but it gets a whole lot easier when you get a grasp of the very basics of tags as well as structure.
Becoming Familiar With HTML
That's what this first lesson was all about: to get your feet wet so that you become accustomed to tags and the basic look of an HTML document. From here, things are only going to get better and more exciting as we plunge headfirst into additional web-building topics that you don't want to miss. Stay tuned for the second lesson in this special series that's coming up real soon!
Here's what you need from start to finish to create your own website. We'll start at learning the fundamentals of HTML in this opening lesson.
Learn HTML - Now!
Your first objective is to learn HMTL (HyperText Markup Language) immediately. This main markup language of the Internet is crucial to your plan. For starters, you'll require a plain-text editor to write HMTL in the first place. There are some free choices of plain-text editor, with a prominent one being Notepad++ for Windows. Other editors that'll cost you include Sublime Text (Windows, OS X and Linux) and Textmate for Mac. The phrase "plain-text editor" is a reference to text that's just symbols, numbers and letters without any style. In essence, all you'll want is an editor that does not save anything besides the text itself. This means no using Microsoft Word! Learn HTML - Now! Your first objective is to learn HMTL (HyperText Markup Language) immediately. This main markup language of the Internet is crucial to your plan. For starters, you'll require a plain-text editor to write HMTL in the first place. There are some free choices of plain-text editor, with a prominent one being Notepad++ for Windows. Other editors that'll cost you include Sublime Text (Windows, OS X and Linux) and Textmate for Mac. The phrase "plain-text editor" is a reference to text that's just symbols, numbers and letters without any style. In essence, all you'll want is an editor that does not save anything besides the text itself. This means no using Microsoft Word! HTML and Tags HTML is, simply put, a collection of text that's saved as a type of document; your browser then identifies this text as utilizing HMTL. The purpose of HTML is to offer your browser a bunch of text-based commands for it to interpret. Tags are used by an HTML document to specify various elements on a webpage and instruct the browser to perform actions like displaying images. A set of the most basic tags can be summed up like this: The first tag is appropriately the starting tag; the second tag is the closing tag, denoted by the presence of the forward slash (/) before the "html." Your whole HTML document will be placed inside of these two tags. To make text, for example, appear bold, it may look like this: Bold text Rounding out the list of basic tag possibilities is the image tag. Here's an example of what this image tag can look like:
Right away, there are noticeable differences between this image tag and the aforementioned tag. There is no ending tag since the img tag is actually self-closing, if you will. It doesn't require a closing tag since there is nothing that would need to be placed in between a starting and closing tag. Nonetheless, you'll note the presence of the forward slash before the last greater-than sign. That's simply there to denote the end, a nod to what's considered proper form as far as HTML is concerned. It's there to please the purists!
Fundamental HTML Structure
It's the perfect time to jump right into HTML structure since you now know about tags. In its simplest representation, HTML structure includes HEAD as well as BODY tags. The former expresses information that won't necessarily show up directly on the webpage itself. Examples are CSS styles, the actual page title (which you know better as the tab or window title on the browser) and additional kinds of metadata.
On the other hand, the BODY tag will express any information that is going to show up on the webpage. Examples of this can include any images, your text and also rich media.
A BODY tag usually contains different elements within it. It's not unusual to see this tag with a DIV tag that has a header ID. The purpose of DIV tags is to hold bits of content, so that it's possible for you to both move them around and style them by using CSS.
It's also possible to fit text into your header DIV tag. You can place the first part of this text inside of an H1 tag. H1 belongs to a whole family of tags - H1, H2, H3, H4, H5, and H6 - that is used to make header text. H1 is the biggest while H6 happens to be the smallest. By default, these create bigger and bolder text, yet it's up to you how to style them when you use CSS. If an HTML document features no CSS-style information, then the H1 tag is just going to make the text on a webpage appear in bold.
So-called "un-styled" text can also appear in an HTML document. The rule among many browsers is to simply render this kind of text in Times New Roman and in size-12 font. If you begin to incorporate CSS styles, you have the luxury of styling this text any which way you want by picking a default style.
Now You Enjoy a Sound Web-Building Foundation
Thanks to this opening lesson, you now possess enough rudimentary knowledge of HTML to start to make sense of the bare essentials of HTML. This is your first step to being able to create a website all on your own! To be sure, all this HTML can look quite intimidating to the beginner, but it gets a whole lot easier when you get a grasp of the very basics of tags as well as structure.
Becoming Familiar With HTML
That's what this first lesson was all about: to get your feet wet so that you become accustomed to tags and the basic look of an HTML document. From here, things are only going to get better and more exciting as we plunge headfirst into additional web-building topics that you don't want to miss. Stay tuned for the second lesson in this special series that's coming up real soon!