Download
1 / 20
220 likes | 378 Views
Web Programming. Basics of HTML. Basics of HTML. HTML stands for Hyper Text Mark-up Language A mark-up language is different than those that you have learned before in Computer Science. A mark-up language places what are called tags at the beginning and end of words that you want displayed.
E N D
Web Programming Basics of HTML
Basics of HTML • HTML stands for Hyper Text Mark-up Language • A mark-up language is different than those that you have learned before in Computer Science. A mark-up language places what are called tags at the beginning and end of words that you want displayed. • Tags are placed into what we will call carrots < >.
Open internet Explorer and go to: http://jhhs.dist214.k12.il.us/ • Click on view…source • What do you see? • This is much more complicated than any page that you will do this semester.
Lets start our first page • You should have two programs open right now. Internet Explorer and Notepad. • Maximize notepad • Click on file..new
Type exactly what you see here: <html> <head> <title></title> </head> <body> </body> </html>
HTML is not case sensitive. <title> is equivalent to <TITLE> or <TiTlE>. There are a few exceptions which we will talk later about. • The words you write are called source code. • If we wanted to make the word HELLO bold on a webpage, we need to know that the bold tag is <B>. When we use this tag, anything that follows will be bold. • What you would type in order to make the word “Hello” bold would be: <B>HELLO
If I have a sentence to be displayed, but only want one word bold, I have to mark where to start making the text bold and where to end. Usually, but not always, the ending tag is the same as the start tag with a slash ( / ) before it. • The line: Who <b>Goes</b> There would print the words Who and There in normal font, but would make the word Goes bold on the screen
You will write the source code for a web page in any text editor like: • Simple Text • Notepad • Any word processor ( as long as it is saved as text only) • The web browser (ie, Netscape, Internet Explorer) will read your source code and translate it into the way you want the words and pictures displayed. Note: There are differences in how web browsers show content
Click file …. Save • Navigate to your file folder named Prog - 2 • Make sure you save the file as a text document. • Give the file the name BlankWebPage.htm • What we just did was to create a template for the web-pages that you will design. Use this to start each page.
Lets begin our first page • Go back to notepad and make sure it says exactly what you see here: <html> <head> <title></title> </head> <body> </body> </html>
Every page you write will begin with what you just typed. • Notice the first and last things are an opening tag and closing tag named html. This tells the web browser that you will be “speaking” HTML in the document. • Next is the opening head tag. Between the open and closing head tags is called the header. This is where you will be giving the page information about how it was created and when.
In the header, you will see an opening and closing title tag. • Between them, type HELLO WORLD <title>Hello World</title> • Time to save. Click save as.. • Give the name of file and make sure it has an extension of .htm or .html or the browser will not read it. • Make sure it is in your file folder.
We are now ready to view our first web page. Open Internet Explorer. Select file…open and navigate to where your file is saved. • Take a look at what you have created. Not much is it? Where did the Hello World get put? See the page: In Browser • If you want to see the source code click on view….source.
As you saw, what you put in the title section of the header is placed at the top of the browser window. • If you want something to be displayed in the browser window, the code needs to be in the body section of the page. If you have not guessed by now, the body section is between the <body></body> tags. • Try putting Hello World in the main browser window! ( make sure you save and reload )
Here are some of the common formatting tags to make words look different: Attributes for Font Types: • <hl></hl>Creates the largest headline • <h6></h6>Creates the smallest headline (headers 1-6 work) • <b></b>Creates bold text • <i></i>Creates italic text • <tt></tt>Creates teletype, or typewriter-style text • <strong></strong>Emphasizes a word (with italic or bold) • <font size=?></font>Sets size of font, from 1 to 7) • <font color=?></font>Sets font color, using name or hex value. Put the text in quotes. • <u></u>Underlines Words
Create a new program and play. Type: <html> <head> <title>Test Page</title> </head> <body> <h1>HelloWorld</h1> </body> </html> • Click save, go to IE click refresh and see what happens. Do this with each of the tags on the last page.
Here are some of the common formatting tags to make the page look different: Attributes for formatting: • <br>Begins a new line • <center></center> Centers text in the browser window • <p></p>Creates a new paragraph • <p align=?>Aligns a paragraph to the left, right, or center. Put the word in quotes. • <hr>Inserts a horizontal rule • <hr size=?>Sets size (height) of rule • <hr width=?>Sets width of rule, in percentage or absolute value • <hr noshade>Creates a rule without a shadow
Create a new program and play. Type: <html> <head> <title>Test Page</title> </head> <body> Hello World<br> </body> </html> • Click save, go to IE click refresh and see what happens. Do this with each of the tags on the last page.
Assignment • Create a web page that looks exactly like what you will see on the next page. When you are done, turn in the source code into the top bin. This is where you will turn in all assignments.
