Style Switcher

Predefined Colors

How To Start Affiliate Marketing? Anatomy of a Web Page

In this lesson we’re going to look at the anatomy of a web page a basic look at some of the more common structures that make up a web page even if you’re not writing your HTML by hand it’s important to be able to recognize some of these things particularly when you come to do your search engine optimization let’s start right at the top the doctype declaration at the start of a webpage is usually an instruction to tell a web browser what version of HTML it’s written on it used to be that you would read something like this fortunately these days HTML has been simplified a little and all you have to do to write in that doctype declaration is this okay when you make a webpage it will always include these two HTML tags value wrap around pretty much everything else on your page to say this is HTML let’s look at the header section this part of the page is invisible when you look at the page in a browser but provides the browser and the search..

Engines with information about your page most importantly it houses your title and your meta tags it might also tell the browser where to find any stylesheet files that you’re using to set colors fonts and other styles for your site or any scripts that you might be running on their page the page title what you put in between your title tags is the text that you want to appear at the top of your window when you look at it on your web page a lot of people neglect this when they build their pages this is frequently the clickable text that ends up appearing in your search listing for the search engines as well so it’s a good idea to put a couple of your keywords into your title tags for instance look at these maybe two tags these also go inside your head section they’re meant to supply information to the search engines about how you want your page to be indexed for instance what the keywords are for your page what description you want used in the search engine listing whether you want your page to be cached etc the two meta tags that you’ll be mostly interested in are the meta keywords and the meta description tags meta keywords well basically they’re the keywords for your site and the Meta Description a succinct description of your page of 200 characters or fewer this occasionally appears in the search engine results underneath the clickable text so it’s good to write something compelling okay the body section this is the main part of your webpage the part that the houses the stuff that people actually see the heating tags h1 h2 h3 etc hitting or H tags denote heaters throughout your text h1 is your main header h2 is a sub header h3 is a sub sub header and so on all the way down to h6 for instance for instance your h1 headers are particularly important for search engine optimization you should try to put your keywords into your h1 headers while obviously keeping it looking natural h2 hitters can also have a little bit of impact so don’t neglect those either links href tags links are the text you click to jump from one page to another the basic link usually looks like this the first part of the link starts with a href equals the a part specifies that a tag is an anchor while the href specifies that the anchor contains a hypertext reference the address of the page or site you want to link to goes in the quotation marks after that ie in place of the dub-dub-dub example.com ford slash page 2 dot HTML above the second part of the link is the text or image that you want your visitors to see it can be plain text like we have above or it can be an image the third part of the link is what closes the link and always looks like this if you don’t close the link you may find your entire page turns into one giant link okay images the HTML for inserting an image into your page generally looks like this IMG says that this is where you are putting an image SRC short for source tells the browser where the image actually is and the equals and the rest of this is the actual location of the image there is some extra information that you can insert into your image tag height and width these are fairly self-explanatory you can specify the height pan the width of the image in pixels so for example it could look like this this is useful because it tells the browser how much space to leave for images when it’s rendering the page this is good if you have lots of images or really big images that take a while to load otherwise your readers may find that text they’re reading on the page is leaping around all over the place while the images on the page load you can also resize images using the height and width values but this isn’t recommended not only will your images end up distorted but your viewers still have to download the whole image in its full size glory and it will still just take as long to load it’s just made to appear smaller alt which is short for alternative text this is the text that is displayed if for some reason the image doesn’t load the alt text is important for these reasons accessibility for example a vision impaired user who surfs the web using screen readers some people can’t actually see your images so a written description of the image is highly recommended anyone surfing the web with images turned off and old text also may have a very small impact on on-page SEO factors however it’s being abused so much in the past that the search engines don’t often pay much attention to alt text anymore alt text well usually looks like this lists are extremely useful and deceptively powerful lil things there are two main types of lists the ordered list and the unordered list let’s start with the unordered list the unordered list basically has no order funny that each item has the same type of bullet you can also have indented lists like so you an ordered list will use numbers letters or Roman numerals as the bullet you can specify the type of ordering in your CSS also as with unordered lists you can have multiple levels of indentation now gov forms if you’ve ever clicked a submit button or seemed to support requests to a business through their website you have used a form forms are part of a page where your user can enter information through text boxes drop-down lists checkboxes and buttons foreman backslash form opens and closes the form you also use this tag to specify the file you want to send the information to input create some sort of input field there are a few different types of these the ones you’ll be most familiar with are these text well this is a standard text field like the ones you enter your username and password and to to log into a side check box well that creates a check box your users can tick as many of these check boxes as they like radio well this one is like a check box but it’s round and users can only choose one option not many people are both female and male submit well this creates the submit button and basic text formatting tags these are some other tags you will encounter inside your HTML P and close P well you might have already encountered these tags and previous lessons there are paragraph tags that rep unsurprisingly around paragraphs strong well represents text that you want to have strong emphasis or importance and most browsers it has the effect of making the text bold M means emphasis and typically has the effect of making text italic and BR or break first creates a line break similar to heading return once on your keyboard it doesn’t need a closing twin in time for today’s lesson summary in this lesson we’ve taken a look at the basic anatomy of a web page in how each section makes up different parts of a web page URI as we looked at included the doctype HTML opening and closing HTML the header section or head section the page title title tags meta tags the body section the heading tags h1 h2 and h3 etc all the way down to h6 links images lists forms and basic text formatting tags anyway that’s a lot to get your head around and that’s all we’ve got time for thanks so much for watching and I look forward to seeing you again soon bye for now you you

As found on Youtube

Posted in Affiliate MarketingTagged , , , , , , , , , , , , , , , , , , , , , , , ,