CS3: INTRODUCTION TO WEBDESIGN

This Unit describes the basics of Webdesign.

HTML can be a little intimidating for those not accustomed to looking at code. That’s why we wrote this article as an introduction to web design basics. Once you familiarize your self with the basics, it becomes easier to write your website using HTML code. This article will break down the basics of how to get your HTML page created. We will go over what HTML is, how to create an HTML page, HTML basics, and what program you can use to edit the HTML.

What is HTML?

HTML is Hyper Text Markup language. Web pages read HTML in order to display your website content. Saying “HTML page” is the same as saying “Web page“. HTML tags format the document and adds functionality. For example, the headline of your site can use the headline tags <h1>, <h2>, <h3> and so forth. This makes text larger and bold for headline. The <h1> being the largest. The <p> tag is for paragraphs and so forth. You will learn more about this in our next article called Understanding Basic HTML Tags.

Important! In order for your home page to load, you will need to name it “index” (all lower case because Linux is case sensitive). If you name your home page home for example, the server will not recognize it as the home page.

What program do I use to edit my HTML

There are many ways to create HTML pages. You can use the File Manager code editor, a program like DreamWeaverNotepad ++KompozerPageBreeze, CoffeCupEdit Plus or any text editor to create an HTML page. HTML is stored in regular text files. You simply name the file .html or .htm file extension. Our servers view .htm before .html in the normal file indexing. So if you have a file called index.htm and a file called index.html, the index.htm will load and not the index.html when visiting your site.

HTML basics: open and closed tags

In HTML, there are 2 types of tags: Open and Closed tags.

The opening and closing tag

A tag that closes has 2 tags: an opening and a closing tag. See the following example;

<body></body>

The <body> is the beginning or opening tag and the </body> is the ending or closing tag. These tags have content or other HTML tags within them. Tags within another tag is called an Element. The following example shows the <body> with an Element in it.

<body>
  <p>This is text in my website.</p>
</body>

The beginning <body> tag tells the browser that the body of the page starts there and the </body> tag tells the browser the body of the page stops there. The <p> that is within the <body> tag is called an Element. This is because the <p> tag is Nested within the <body> tag.

The self closing tag

The tag that is left open has only one tag. The end of the tag contains a ( / ) telling the browser that the tag ends. An example of a tag that is left open is the following:

<link href=”/support/” rel=”” type=”” >

There is no content that goes in this type of tag. These tags store HTML attributes that are used to reference other files or have attributes added to them. Common tags that don’t close are the <link />, <input />,<br /> and <hr />.

How to create your first HTML page

In order to create a web page so it is properly read by the web browser, you will need 4 different HTML tags. Below is a table explaining the necessary tags for your webpage.

Important! <!DOCTYPE html> The <!DOCTYPE html> type tells the browser how the webpage is coded. This allows some sites to be rendered strict to the newest coding standard or to use a transitional type that allows older deprecated HTML tags in the document type. Don’t worry about the type of document type for now. This is not a tag; however, it is needed at very top of the webpage code.

Basic webpage tags
<html></html>
The <html> tag tells the browser that the code is an html document.
<title>
The <title> tag sets the text of the page for the browser toolbar and search results. This is not seen on the webpage itself. This is required in the head section of your Webpage.
<head></head>
The <head> tag is where code is stored that processes styles, scripts and links to internal documents and so forth. These do not display on the webpage. The tags used in the head section are <title>, <style>, <base>, <link>, <meta>, <script>,and <noscript>
<body></body>
The <body> tag is where all the content for your website is stored. This is what is visible to the visitor of the webpage.

To see this code in context, see the example below with the HTML tags in use in an actual webpage.

<!DOCTYPE html />
<html>
  <head>
    <title>This is the title of my website</title>
  </head>
  <body>
    <p>This is my webpage content.</p>
  </body>
</html>

HTML tags and attributes within the tag are used to create the HTML documents that you see displayed via the internet. You can use HTML code to add images, create links, and modify how text is displayed. There are many tags that are available to help you design and format your page. You can see our HTML tag reference list for a full list. This article will go over several of the most commonly used HTML tags.

Header tags

Header tags are used to help divide content. They are commonly used with titles of sections. They are also numbered from <h1> to <h6>. The <h1> tag is deemed to be the most important, so it is larger than the others. They continue to be smaller in size down to the h6 tag, which is the smallest. While <h1> tags are very common, the lower end tags such as <h5> and <h6> are used only in deeply detailed documents. Below is an example of each of the header tags.

Code:

<h1>This is an H1</h1><h2>This is an H2</h2>

<h3>This is an H3</h3>

<h4>This is an H4</h4>

<h5>This is an H5</h5>

<h6>This is an H6</h6>


Output:

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5
This is an H6

Strong tag.

The <strong> tag is used to make important words or text stand out. This tag makes the text appear in bold. In HTML 5, it is often used to replace the <b> tag. By HTML 5 standards, you should always use the <strong> tag when you need bold text. Below is an example of some strong text.

Code:
<strong>This is strong text.</strong>

Output:
This is strong text.

Emphasis tag

The <em> tag is used to make text stand out from the surrounding text. This text would be important enough to stand out, but not as important as the text that uses the <strong> text. Most commonly, it is used to display text in italics and is often used in place of the <i> tag. Below is a sample of some text using the <em> tag.

Code:
This is a normal sentence. <em>This one needs to stand out a bit.</em> This is another normal sentence.
Output:
This is a normal sentence. This one needs to stand out a bit. This is another normal sentence.

Linebreak tag

The <br /> tag is used for making text go to the next line in a specific place. A long sentence will wrap at the edge of the page automatically, but this will very depending on the width of the viewer’s screen. The <br /> tag will cause the text to wrap at the same place, regardless of the visitor’s screen. Below is a sample of a sentence that is broken up by a <br />tag.

Code:
This sentence is broken <br /> in the middle.
Output:
This sentence is broken
in the middle.

We will discuss using HTML to create links, insert images, and insert videos in later sections of this Education Channel. For more information on tags and using CSS for styling the content, please see our education channel on using CSS on your website.

THIS VIDEO EXPLAINS MORE ABOUT WEBDESIGN

SEE ALLAdd a note
YOU
Add your Comment
 

DOWNLOAD YAAKA DN APP









X