Part 9
advertisement
HTML • Markup language – coded text is converted into formatted text by a web browser. • Big chart on pg. 16—39. • Tags usually come in pairs like – <TAG> data </TAG> • Some like <br>, <hr>, <meta> are single. • Words in tags can be in upper or lowercase. 1 HTML Document Parts • • • • • • Every HTML document needs <HTML> at the start. </HTML> at the end. They usually have a header and a body. They have <HEAD> …header …</HEAD> They have <BODY> …body…</BODY> 2 HTML Comments • Comments look like <!--- Put comment here ---> • • • • Comments make HTML code easier to read. They explain what the parts do. They break up the code into smaller pieces. You should use comments in complex HTML documents. 3 HTML Whitespace • Whitespace is essentially ignored by HTML interpreters like web browsers • Having many spaces between words, or tabs, or many newlines do not affect the appearance of the text. • The symbol &nbsp; makes a space • The tag <br> makes a newline. 4 HTML Headers • <HEAD> </HEAD> -- enclose header info. • <TITLE> </TITLE> -- Text here sent to top of browser. • <META> -- These single tags go in the header. – Eg: <META name=“keywords” content=“dog house car”> • Frame information. 5 HTML Body • The main data goes into the body. • <body> …Body of Page…</body> • Text typed here will be displayed in a big chunk without formatting by whitespace such as tabs or newlines or extra spaces. • <pre>…text…</pre> preserves whitespace. 6 Body formatting • <BODY BGCOLOR=(number) text=(number) background=(picture)>…body of the document…</BODY> – The numbers are 6 hexadecimal digits – RRGGBB where each letter is 0-9 or A-F – Picture is some .gif or .jpg or some other image. It gets tiled in the background. 7 HTML Links (Anchor tag) • <A HREF=URL>…text or image…</a> • URL can be – A webpage – A file to download – An email address to mail to. • The text or image is the thing you see on the actual page that takes you to the link. 8 HTML Text Formatting • Some features include – – – – <br> -- makes a line break. <hr> -- makes a horizontal line. &nbsp; -- makes a space. These can be used multiple times. • <p>…text…</p> -- paragraph format. • <CENTER>…data…</CENTER> Centers the objects inside the tags. 9 HTML Fonts 1 • <B>…text…</B> -- makes text bold. • <I>…text…</I> -- makes text italicized. • <em>…text…</em> -- emphasize text. – Not always well-defined. • <h1>…text…</h1> through <h6>…text…</h6> -- Different sizes of text. h1 is biggest. 10 HTML Fonts 2 • <FONT>…text…</FONT> -- let you specify more detailed information. • <FONT SIZE=(number)> -- pick size. – Number can be a difference like +2 or –3. • <FONT COLOR=(number)> -- pick color. – Color is a 6-digit hexadecimal number. – RRGGBB, each is 0-9 or A-F. 11 HTML Lists • Lists -- tags to begin and end the lists. – Ordered lists <OL>…</OL> – Unordered lists <UL>…</UL> • Each element in the list is a list item. • The <li> tag is used at the start of an item to put it into the list. • The closing </li> is optional. 12 HTML Tables • <TABLE>…</TABLE> -- tags that enclose a table. • <TR>…row data…</TR> -- enclose a single row. (Table Row) • <TD>…data…</TD> -- enclose a single piece of data. (Table Data) • <TABLE BORDER=1>… makes a border. 13 HTML Tables 2 • A <td> or <tr> tag can be aligned. – Eg., <td align=left> <tr align=right> • <th>…</th> tags for headers (first row). – They appear bolder and larger. • A <td> tag just contains HTML. It can be text, images, links, etc… • rowspan lets elements be bigger. 14 HTML Images • <IMG SRC=URL ALT=“message.”> – SRC gives the location of the image. – URL can be a local file or a remote file. – Browser knows how to work with standard formats like .jpg, .gif. – ALT=“message” shows a text message. 15 HTML Links • • • • • Use the <A HREF=URL>…</A> tag. Can link to local pages (files). This lets the page owner split up the data. Each piece of data can be seen separately. The items can be images or files to download. 16 HTML Templates • Get the basic structure of a webpage given to you. • For example, mytemplate.html. – – – – You will use a file like this in a project. Every person’s page will be different in detail. Every person’s page will be similar in structure. You use the template and add details as needed. 17 HTML Frames • Split the page into rows or columns. – <frameset rows=“90%, 10%”>…</frameset> – <frameset cols=“75%,25%”>…</frameset> • Can do more than 2 rows/columns. • The percents don’t have to add up to 100. • Things after <noframes> are shown if your browser can’t see frames. 18 HTML Frames 2 • The <frameset> data goes in the header. • Within <frameset> use a series of – <frame name=somename src=URL> – There are no quotes around the name and the URL. • Each <frame> tag fills in a frame. • They fill in from left to right, top to bottom. 19 CGI • Common Gateway Interface • Programs that let HTML pages interact with the viewers • Programs can send specific information. • Programs get information from users. • Written in C/C++, Java, Perl, UNIX scripts. 20 Forms • <form>…form data…</form> • Method attribute: post or get – Get gives a URL where the script can get data. – Post sends the data to the program. • Action attribute: The URL of the program that will process the data being sent. – This could also be a mailto so the data just gets sent in an email. 21 Input types • Some input types: – – – – – – <input type=“submit”> <input type=“reset”> <input type=“button”> <input type=“radio”> <input type=“text”> <input type=“checkbox”> 22 More Forms • Each input has a “name” attribute telling what type of data is entered there. • Each input also has a “value” that gets sent in the form info. • <textarea Name=“Some name” rows=6 cols=55></textarea> makes an area where you can enter a block of data. 23 Java Applets • Place <applet> and <param> tags in the html document. • <applet> tags surround the whole applet. • <param> tags are used to input parameters (or data) to tell the applet what to do. • The .class file must be in the same directory as your html file. 24
