Having Your Own Website PDF

# Having Your Own Website ## Lesson Goals - Explain the purpose and content of your website. - Identify the first steps in making a website. ## Your Website Objective Determine your objectives in making a website: - Do you want a journal online where you can share your thoughts? - Do you want a ve...

# Having Your Own Website ## Lesson Goals - Explain the purpose and content of your website. - Identify the first steps in making a website. ## Your Website Objective Determine your objectives in making a website: - Do you want a journal online where you can share your thoughts? - Do you want a venue where you can write about your hobby? - Do you want to promote a family business? - Do you want to put up a fan website for your favorite celebrity? - Do you want to create an informational website about your city? - Who will be your target audience: teenagers, kids, young professionals, parents, or all of the above? **Write your goals down to have a clear guide when you start creating your website.** **If your goal is to have a personal website, you can make it as casual or as formal as you want, depending on how you wish to present yourself online.** **A personal website is the easiest to create because it is about you and your life, and you can construct it to your own liking.** **But if your goal is to have a professional website to promote a product or service, you would have to study similar and successful websites to understand what makes them tick.** ## Your Website Content Once you have written down your goals for your website, determine the types of information you want your site to contain. **No matter how impressive your website looks, it is your content that will lure back visitors to your site or drive away. The way you write your content will largely depend on your target audience.** **Know your target audience:** - If you're catering to teenagers, research the types of content teenagers want. - If you're promoting a service useful to mothers, find out what moms are curious about in that service and include these topics on your website. **Aside from being helpful to your target audience, strive to have well-written content. It gives your website more sense and makes it more attractive to visitors.** ## Your Website Name After determining your website goals, target audience, and content, it's time to pick a domain name and a website title. **The domain name identifies the URL or address of your website.** - If you're building a personal website, you can use your full name. For example, *www.phoebesantiago.com* or *www.ralphdevera.com*. - You can also use catchy words that describe your persona or the persona you want to showcase. For example, *www.geekychef.com*. **If you're creating a website to promote a business, a good domain name could immediately give a clue as to what your website is about.** - For example, if your family business is selling and shipping sweet delicacies from Cebu, *www.cebusweets.com* would be a good domain name. **Your domain name should be catchy enough to attract visitors to your website and at the same time short enough for good recall**. - For example, if you're selling footwear for babies and toddlers, *www.babyshoessandalsandslippers.com* is too long and hard to remember. Make it simple and easy to memorize. For example, *www.babyfeet.com*. **Remember that it's better to be straight and not vague, especially if yours is a professional website with a lot of competition**. - For example, if you're selling fashionable hats, ditch *www.prettyfashion.com* for something more specific like *www.trendyhats.com*. **Don't forget to ask for opinions.** - You may think your domain name represents you or your business fittingly, but what do your prospective readers think? - Ask family members and trusted friends, especially those who are Internet savvy, for their honest feedback and suggestions. - **Like your domain name, your website title should use a keyword that refers to what your website is all about.** - For example, if you're selling homemade goodies, your website title could be *Nana's House of Goodies.*. ## The Look of Your Website The look of your website is very important because it is what your audience will first see. **A good, appealing website design not only attracts but also builds credibility.** - Like content, your website design should look attractive to your target audience to be effective and to stand out from other similar websites. - If you're creating a professional website, it would be helpful to have a professional logo that will increase recognition and recall for the product or service you are offering. ## The Main Parts of a Website - **Header:** This is the top section of the website that contains your website's logo, name/title, and perhaps other elements such as a search box, contact information, social media links, and photos. - **Top Navigation:** The top navigation contains links to the major sections of your website. - **Body:** This is where the main content of your website can be found. It can be in text, images, sounds, or videos. - **Footer:** The footer is at the bottom of your website. It contains links to important sections of your website. - **Sidebar:** The sidebar is used to spotlight some pages of your web page. Not all websites have a sidebar. ## Not Sure How to Go About Designing Your Own Website? Don't Worry! There are lots of Web designers who can do it for you for a fee. Or maybe you have a family member or a friend with Web-designing skills who is willing to do it for free. You can also do it yourself by learning HyperText Markup Language (HTML), the most common programming language used in creating websites. ## Roundup Websites are the basic units of the World Wide Web. To create a successful website, you need to plan beforehand and determine your website's objective, content, name, and design. # Script Language: HTML ## Lesson Goals - Explain the HTML scripting language. - Apply the basic principles in HTML programming. - Use standards in HTML tags. - Create a simple web page. ## Websites Are Created Using Scripting Languages Such As HTML In this lesson, we will learn some basic HTML tags used in website creation and reminders before creating your own website. ## Scripting Languages In the world of Web developers, a scripting language is a programming language or format that tells the computer how to display a Web page. **A scripting language can run within a Web browser.** Most common of all scripting languages is HTML or *HyperText Markup Language*. **In advanced Web design, a scripting language is a specialized language used to create scripts. When inserted into a Web page, the scripts control various elements of the page, such as the user interface, styles, and HTML markup.** Other types of scripting languages available today are JavaScript, VBScript, PHP, Perl/CG XHTML, XML, ActionScript, AJAX, and jQuery. ## HTML: The Common Language for Publishing Hypertext on the World Wide Web (WWW) It can be created and processed by a wide range of tools, from simple plain text editors—you type it in from scratch— to sophisticated WYSIWYG (What You See Is What You Get) authoring tools. **HTML uses tags to structure text into headings, paragraphs, lists, hypertext links, etc.** Anything that is enclosed between the “<" and ">" symbols is called a tag. HTML also has attributes which define the property of an element. To be a good Web developer, you must know the different HTML tags and *HTML attributes*. ## As of This Writing, HTML 5 Is the Latest HTML Version It brought improvements for multimedia, graphics, forms, and more. The WHATWG (Web Hypertext Application Technology Working Group) is a group of people that maintains and evolves the HTML Living Standard. They are responsible for making continuous updates and improvements to HTML. ## Basic HTML Programming We will now learn the basics of HTML programming. First, we should decide how we will write HTML codes. There are two ways: - **HTML by hand:** Which uses Notepad or some other text editor to write HTML codes manually. - **Using an HTML editor:** Which has a tool that writes and edits tags automatically. - Examples are Dreamweaver, Notepad++, or Sublime Text. What follows is a sample HTML structure containing basic HTML codes or tags in creating a web page: ```html <!DOCTYPE html> <html> <head> <title> Welcome to My Website </title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> ``` ## The Following Steps Will Teach You How To Start Programming With HTML And Familiarize You With Some HTML Tags: 1. **Every HTML document should begin with the <!DOCTYPE> Declaration**. The <!DOCTYPE> declaration defines the document type and assists browsers in rendering web pages accurately. It should only appear once and at the top page of any HTML document. Here is the <!DOCTYPE> tag for HTML 5: ```html <!DOCTYPE html> ``` 2. **The <!DOCTYPE> tag should be followed by the <html> tag.** The <html> tag marks the beginning and end of an HTML document. It declares the overall structure and scope of the document. It also has a closing </html> tag to which a forward slash is added, like this, </html>, to signify the end of the HTML structure 3. **The HTML <head> tag**. The <head> element serves as a repository for metadata, which refers to information about the data, positioned between the <html> tag and the <body> tag. Inside the <head> element, you can include the following elements: - `<title>` (mandatory in every HTML document) - `<style>` - `<base>` - `<link>` - `<meta>` - `<script>` - `<noscript>` To end the head section, use the `</head>` tag. 4. **Insert a title section.** Inserting a title section is simple to do. Just use the `<title></title>` tags and insert a title between these tags like this: `<title> Welcome to My Website </title>` To try this out, type the above into a text editor and save the file as "test.html", then view the file in a web browser. If the file extension is ".html" or ".htm" then the browser will recognize it as HTML. Most browsers show the title in the window caption bar. 5. **Add headings and paragraphs.** If you have used Microsoft Word, you will be familiar with the built-in styles for headings of differing importance. In HTML, there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important. Here is how to add an important heading: ```html <h1>An Important Heading</h1> ``` Here is how to add a slightly less important heading: ```html <h2>A slightly less important heading</h2> ``` Each paragraph you write should start with a `<p>` tag. The `</p>` is optional, unlike the end tags for elements like headings. For example: ```html <p>This is the first paragraph.</p> ``` **`<br>`: The break tag inserts a line break. Unlike the P tag which inserts a large amount of space, the break tag lets you begin a new line without so much space. Note that for every beginning tag (except for the break tag), there should be a corresponding end tag.** ## Creating Your Own Web Page Before creating your own Web page, you should be aware of copyright issues. Make sure that whatever you put in your Web page, such as images and text, are not copyrighted by others. Here are the steps in creating your own Web page: - Gather information. - Determine the intended audience. - Create a storyboard. - Plan your navigational tools. - Create an aesthetically appealing Web page. - Establish credibility. - Upload your website to a Web hosting provider. ## Roundup Viewing websites is possible because of scripting languages like Hypertext Markup Language (HTML) that tell computers how to display them. Computer users can make use of HTML by writing scripts on their own or by using HTML editors that automatically edit scripts to produce the necessary displays.