ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to create a web page

Updated on November 26, 2006

Learn how to make a basic webpage

Web design is a fast growing industry and to do it really isn’t that hard because it’s easy to learn, and there are resources everywhere to learn from. To build a website you first need to learn how a website works. Websites are basically just a bunch of codes all working together to tell your web browser how to look and what to show. Each web page needs to have certain criteria met to make it work. If you do not follow certain rules then the web browser won’t know how to interpret certain codes and can make it look different then you want. Another nice thing about designing websites is that you really don’t need any special tools or programs to make the website. You can use any basic text editor like Notepad which comes free in if you have Windows. Most web designers don’t use text editors because they take too long type out and also programs such as DreamWeaver make it a lot easier to let the program do all the coding as you do all the designing. So now that you know what websites run on code, I’ll tell you the basic codes that are a must for each website.

Websites are in a phase where groups are trying to get all websites to have the same type of code and also for web browsers to read code the same. This is called XHTML, which is a hybrid of XML which is a more dynamic way of designing sites and HTML which is hyper text markup language. Also everything needs to be lowercase, just an FYI. So now that you know that XHTML is the way of the future you have to know what to put at the beginning of any coding you do which is this code line

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is probably at the beginning of any webpage you look at the code of. In face if you right click this web page and go to view source you can see at the top that that line is written there. That line tells the web browser what kind of code is in the website and how to read it and display it. So that is what goes at the top of each webpage. The next tag is the HTML tag which looks like this.

<html>

</html>

The HTML tag goes around all of your content except the doctype tag. When you put all of your content between the html tags it is telling your browser that it is a web page. Pretty simple, nothing special there. Note how there are two head tags. Tags are things in <> they are what the browser reads to put things in the right spots basically. Each tag needs a closing tag which always has a “/” in it. The first tag also can have different attributes which would look like this.

<tag=”attribute”>

Next you need to tell the web browser what needs to go in the head tag. The head tag is where you put in the title of the site like how at the top of this webpage it says, “How to create a web page-hubpages” or something like that. Also that’s where you put in a bunch of undercover coding for different scripts, meta tags, and other commands that control the page. But we can get into that on a different hub. This is the how the head tag should look for a basic page.

<head>

<title>Title of the page here</title>

</head>

So that just told the web browser to put “Title of the page here” at the top of your browser.

Which you have attributes on tags they need to be in quotes. Its part of the XHTML criteria. Ok so that was the head tag. Now onto the next important part of the webpage which is the body tag. The body tag is where you put all your content that you want people to see, the body tag has a ton of info between the tags and is what the browser reads and displays. This is the body tag.

<body>

</body>

You always want all your content between these tags because that’s how your browser knows what to do. So now let’s put these all together and see what we get. Open up your notepad or text editor and copy and paste this into it.

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>My first web page</title>

</head>

<body>

This is my first webpage

</body>

</html>

Ok after you put that in your text editor save it as whatever you want but make sure you save it as a .html file. For example, mypage.html. This tells your computer that it’s a webpage and will display it as so. After you save it open the folder wherever you saved it and double click it, it should open up as a webpage and you’ll see that at the top it says “My first webpage” and then in the page area it will say “This is my first webpage”. So there you have it, you made your first basic page. There are a ton of tags that you can incorporate into web pages to make them more dynamic. Check out the links I give you to learn more about it. Also check back on my hubs and ill have more on web design. If you have any questions just leave a comment and ill comment back.

Also if you don't want to spend 400 dollars on a copy of DreamWeaver I can get it to you for half the price, just e-mail me at YoJDawg@gmail.com

Comments

    0 of 8192 characters used
    Post Comment

    • YoJDawg profile imageAUTHOR

      YoJDawg 

      9 years ago from Arroyo Grande

      I agree, knowing HTML helps you alot with programs such as dreamweaver because if something goes wrong, you may have to look at the code and figure it out, and if you don't know what certain things mean or the basics of how it should work then you can't fix it. Also, knowing HTML helps you know how structurally how it works.

    • david sahlstrom profile image

      david sahlstrom 

      9 years ago from Sweden

      Great hub, thumbs up from me!

      Even if you use a WYSIWYG such as Dreamweaver I think it's important to know the basics of HTML.

      http://soulstyle.se/2009/03/02/dreamweaver-cs3-for...

    • profile image

      Keith Wood 

      9 years ago

      Wow! Its a great info! This is very helpful for the beginners. But for that basic html language is essential to create web page. I think the enough information is given in the hub regarding web page creation. Thanks a lot and hope to be updated with any new info in this regard. Thank you.

    • profile image

      blogman 

      11 years ago

      Helpful information for the beginner

    • waynet profile image

      Wayne Tully 

      11 years ago from Hull City United Kingdom

      Cheers for the great info!

      I&#39;ll add your hub link to a relevant one of mine.

      https://hubpages.com/technology/The_importance_of_...

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)