Web Development Starter Pack
Here we are providing with you the Web Development Starter Pack
so that it will be really helpful for you to read and write some codes on your own .
It's fun writing codes and running them by ourselves because it increases our level of understanding an we don't even need to be dependent on others.
GETTING STARTED
Now create a folder called “html” wherever you like to save files on your computer and save the file as “myfirstpage.html”.
Be careful. It is important that the extension “.html” is specifiedTo look at HTML files, they don’t even need to be on the web. Open a web browser such as Chrome,Firefox, Safari or Internet Explorer and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example,“c:\html\myfirstpage.html”) and hit return. Alternatively, go to the File menu of the browser, select Open, and browse for the file.Pow. There it is. Your first web page. How exciting. And all it took was a few typed words.
TAGS, ATTRIBUTES & ELEMENTS
TAGS
The basic structure of an HTML document includes tags, which surround content and apply meaning to it.Change your document so that it looks like this:
Now save the document again, go back to the web browser and reload the page.
The appearance of the page will not have changed at all, but the purpose of HTML is to apply
meaning, not presentation, and this example has now defined some fundamental elements of a web page.
The first line on the top, <!DOCTYPE html>, is a document type declaration and it lets the browser know which flavor of HTML you’re using (HTML5, in this case). It’s very important to stick this in - If you don’t, browsers will assume you don’t really know what you’re doing and act in a very peculiar way.
To get back to the point, <html> is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. The stuff between<body> and </body> is the main content of the document that will appear in the browser window.
CLOSING TAGS
The </body> and </html> put a close to their respective elements (more on elements in a moment).
Not all tags have closing tags like this (<html></html>) some tags, which do not wrap around content will close themselves. The line-break tag for example, looks like this : <br> - a line break doesn’t hold any content so the tag merrily sits by its lonely self. We will come across these examples later. All you need to remember is that all tags with content between them should be closed, in the format of opening tag → content → closing tag. It isn’t, strictly speaking, always a requirement, but it’s a convention we’re using in these tutorials because it’s good practice that results in cleaner, easier to understand code. You might come across “self-closing” tags, whereby a br tag, for example, will look like “<br />” instead of simply “<br>”. This is a remnant of XHTML, a form of HTML based on another markup language called XML. HTML5 is much more chilled out than XHTML and will be happy with either format. Some developers prefer one way, some prefer the other. We tossed a coin and decided to stick with the simpler version.
Attributes
Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like <tag attribute="value">Margarine</tag>. We will come across tags with attributes later.
Once again, quotation marks aren’t always essential but it is a good-practice convention and uses for consistency and clarity. We suggest you do the same.
Elements
Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in between (and includes) the <body> and </body> tags is the body element. As another example, whereas “<title>” and “</title>” are tags, “<title>Rumple Stilt skin</title>” is a title element.
Page Titles
We have added two new elements here, that start with the head tag and the title tag (and see how both of these close).
The head element (that which starts with the <head> opening tag and ends with the </head> closing tag) appears before the body element (starting with <body> and ending with </body>) and contains information about the page. The information in the head element does not appear in the browser window.
We will see later on that other elements can appear inside the head element, but the most important of them is the title element. web page” will appear on a tab or the title bar of the window (not the actual canvas area). The text that you put in between the title tags has become the title of the document (surprise!). If you were to add this page to your “favourites” (or “bookmarks”, depending on your browser), you would see that the title is also used there.
PARAGRAPHS
Go back to your text editor and add another line to your page:
Look at the document in your browser.
You might have expected your document to appear as you typed it, on two lines, but instead you should see something like this:
This is my first web page how exciting
This is because web browsers don’t usually take any notice of what line your code is on. It also doesn’t take any notice of spaces (you would get the same result if you typed “This is my first web page How exciting”).
If you want text to appear on different lines or, rather, if you intend there to be two distinct blocks of text (because, remember, HTML is about meaning, not presentation), you need to explicitly state that.
The line-break tag can also be used to separate lines like this, but is not recommended.
The p tag is used for paragraphs.
Look at the results of this. The two lines will now appear on two lines because the browser recognizes them as separate paragraphs.
Think of the HTML content as if it were a book - with paragraphs where appropriate.
Hope Web Development Starter Pack will help you understanding some basics of Web Development not only basics but you can understand better than just basics.
Post a Comment