PC Magazine Digital Edition (Opens in a new window) Show PC Magazine Digital Edition Read Great Stories Offline on Your Favorite Device! PCMag Newsletters PCMag Newsletters Our Best Stories in Your Inbox Honest, Objective, Lab-Tested ReviewsPCMag.com is a leading authority on technology, delivering lab-based, independent reviews of the latest products and services. Our expert industry analysis and practical solutions help you make better buying decisions and get more from technology. How We Test Editorial Principles HTML is a markup language which browsers use to determine how a webpage should be displayed. By learning HTML, you’ll be able to write code which describes the look and feel of a website you’re trying to build. All of this HTML code is going to be contained inside a Once you’re set up with your IDE we can start creating our first HTML file! Your First WebpageWhen we’re working in HTML we’re creating web-pages. HTML documents are meant to be read and processed by a web browser. In order to create a website that it organized properly, we’ll want to make sure that all of the HTML files we create are inside the same folder. Let’s begin by creating an empty folder for all of our HTML files going forward in the course. You can call it whatever you want, most people will name it the same as their website. Now that we have an empty folder we can create our HTML file. If your IDE supports it, I would recommend adding this new folder to the IDE’s file explorer or workspace. This will make it easier to see what’s going on without having to leave the editor. Creating index.htmlInside the new folder create a file named Just like most people organize their files into folders and sub-folders, websites are also organized in this same way. When your website is run by the browser it will use the directory of the HTML file to determine the web page’s URL. This URL is either relative to your local file system, or to your hosted website. In this case, all you need to know is that when we name the HTML file Now that we have our file created, let’s add some text in it and test it out on the browser. Inside Copy This is the most basic form a website can take, just some plain text written out. Now find Whe the page loads on the browser it should say Believe it or not you’ve just created your first website. It’s really basic and only has a few words on it, but it’s still a website and you’ve made your first step towards becoming a web developer. TagsWhile our current website is impressive in it’s own right, it’s not technically a properly structured HTML document. HTML documents are all required to be structured in a certain way to ensure that they will display correctly in all different versions of different browsers. Our HTML document, with only plain text, will display fine, but if we try to do anything more complex we run the risk of some older browsers not understanding the page. In order to make this a proper HTML document let’s format it correctly. Copy Take a look at the updated HTML document above. This is now structured correctly, and should be understandable by every browser. Now, your first thought is most likely What are those weird < /> things. It’s a good thought, if this is your first time seeing HTML code then you’ll be wondering what those are. Those symbols with
the All of the content in our webpage is going to be contained in these tags. There are hundreds of HTML tags, although luckily most of the time you can get by with only knowing 10-15 of them. All tags have names associated to them, and depending on what you’re trying to display on the webpage you’ll use a different tag. Container vs Non-Container TagsThere are two basic types of tags in HTML, container tags and non-container tags. Container Tags are comprised of two tags that go together, an opening and a closing tag. In the example above we have a bunch of container tags. Take a look at the All tags are comprised of a Container tags encapsulate other tags and plain text. Container tags are also nest-able, meaning you could have a container tag within another container tag. This nesting gives way to parent child relationships. Generally an html container tag can have a parent tag and also child tags. Next are non-container tags (I sometimes call these single tags). These
are tags which don’t have a starting and an ending component, instead they’re just a single In the code above we don’t have any non-container tags (they’re more rare), but we’ll look at a bunch of them throughout the course. Learning the CodeNow that we know some more about tags, let’s break down that html program above and see what it’s doing. We’ll start with the first line: Copy This is the DOCTYPE declaration. It’s actually not technically an HTML tag, rather it’s a declaration which tells the web browser what type of file this is. The browser will see this and know to treat the file as HTML document. After the doctype declaration we can place all of our HTML: Copy This is the most basic structure we can have in HTML. All HTML documents are encapsulate by a set of Inside these The head tags are basically the settings for your HTML document. In here we can place all sorts of special tags which will help to configure and provide meta-data about the html document itself. Above we have some Nothing that you put in the head tags will show up in the actual html document. Like I said, this section is mainly for the browser and for things like search engines to use to learn about your html file. Below the head tags we have the body tags. It’s inside of these tags that we’ll place all of the content that is meant to appear on the web-page. Right now all we have is our Hello World text, but eventually we’ll learn some more tags which will allow us to have more control over how this content is arranged and displayed on the page. Making ChangesNow that you have A lot of times developers will split their screen between their text editor and the browser so they don’t have to be constantly switching between screens. As you start writing more HTML you’ll find what works for you, but in the mean time it’s worth trying! How do you make an index html file?To create an index for a Web site. Create an index file.. Create the HTML file that will contain your index.. Place your cursor at the location where you want the index file to appear, and then click HTML Help ActiveX Control. ... . In the Specify the command box, click Index, and then follow the instructions on your screen.. Where is the index html file?The index. html file is stored inside the web site root directory of the webserver. If the webserver is Apache2 the default path is /var/www and the web site folder name.
Why is html file called index?When you arrive a website, for example www.website.com , you're not pointing to a file (like you would be if you typed www.website.com/about.html ), you're pointing to a directory listing of all the files. The webserver will try to serve a file, typically called index. html or index.
What is index html save?It might be your 3rd party software editor has created the file as backup and renamed it as index. html. save . It could be a temporary file created by the editor each time you hit Ctrl+S (save).
|