HTML Simple Introduction Copyright 1998-2017 Curt Hill
HTML Hyper Text Markup Language A text based formatting language Consists of text and tags Text is written mostly without regard to margins The browser may dynamically change margins XML was once seen as the successor before HTML 5 It may emulate HTML Copyright 1998-2017 Curt Hill
Purpose HTML is designed to display material It has many of the same functions as a word processor or text processor It has no control over margins A word processor intends to print, so margin control is important A browser intends to display, margins are a function of window size and display size of the information A word processor may store its documents in a file using any characters The markup of HTML must be plain text for machine independence Copyright 1998-2017 Curt Hill
HTML Tags A tag is enclosed in < > A keyword identifies the function Some parameters may be part of the tag Paired tags start with <xxx> and end with </xxx> Tag names are not sensitive to case Some tags do not need a ending tag They do not need to be properly nested Copyright 1998-2017 Curt Hill
Structure of HTML file Starts with <HTML> and ends with </HTML> The file is composed of two pieces within this: Head - <HEAD> to </Head> Body - <BODY> to </BODY> Different tags can be in each These will be considered now, but many more exist than than will be shown Copyright 1998-2017 Curt Hill
HTML Head Tags <Title>Page Title</Title> The title that most browsers show Various META tags that indicate author etc. HTML files produced by other programs (eg. Word) will produce many other tags in this area These are usually <META> tags which give a variety of auxiliary information like subject, program name, template, etc Copyright 1998-2017 Curt Hill
Home Page Head <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> <TITLE>SE 311 Home Page</TITLE> <META NAME="AUTHOR" CONTENT="Curt Hill"> <META NAME="GENERATOR" CONTENT="Curt Done It"> </HEAD> Copyright 1998-2017 Curt Hill
HTML Body Tags The body contains most of what shows in the browser window The Body tag can set the default colors, backgrounds etc Between <BODY> and </BODY> occurs all the content of the page as well Copyright 1998-2017 Curt Hill
Paired Formatting tags <CENTER> to </CENTER> <B> to </B> bold <I> to </I> italics <U> to </U> underline <TT> to </TT> monospaced typewriter font <FONT> to </FONT> determines font sizes and styles – needs parms <Hn> through </Hn> creates a header Copyright 1998-2017 Curt Hill
Unpaired tags Some HTML generators will pair these as well, but it is not necessary <P> new paragraph <BR> a new line <BR/> a new line with no </BR> <HR> produces a horizontal line Copyright 1998-2017 Curt Hill
Unrecognized Tags There have been a proliferation of tags Tag of the week became the saying A browser that does not handle a tag should just ignore it Not display and not act upon Some tags have an action to perform if the feature is not available The Java applet tag Copyright 1998-2017 Curt Hill
White space White space is defined as anything that does not produce a printable character This includes: Blanks Tabs Carriage returns Line feeds Generally HTML treats one or more contiguous characters as it they were just one Copyright 1998-2017 Curt Hill
More Examples <H1><CENTER>SE 311 Home Page </CENTER> </H1>SE 311. <H2>Test</H2> No tests are currently scheduled. <H2>Presentations and Examples</H2> <BR/>No presentations have yet been given, but they will appear here after they are. <H2>Other links</H2> Copyright 1998-2017 Curt Hill
More of page <H2>Return links </H2> <P> <A HREF="index.htm" target="_top"> Return to Curt Hill's home page.</A> <P>Last time I updated this page: <!DATE2>January 7, 2008<!/DATE>. <P> <FONT SIZE=1> </FONT> </BODY> Copyright 1998-2017 Curt Hill
Browsers Nearly every web browser has the ability to show the original source You should look at the actual home page of this class for examples Copyright 1998-2017 Curt Hill
Creating HTML There are very many ways HTML is a simple text file with nothing that is not ASCII Thus a simple program like Notepad++ may create or modify Most word processors may export HTML or act on it directly Like MS Word There are numerous specialized programs as well DreamWeaver FrontPage Copyright 1998-2017 Curt Hill
Another Example Lets consider one more example The nearly obsolete Java Applet Tag Copyright 1998-2017 Curt Hill
Java applet tags <APPLET code=“X.class” height=100 width=400> <PARAM name=p value=“parm value”>Default message </APPLET> code identifies the class file size of panel is determined by height and width Multiple params can be entered The default message is shown if the browser cannot handle Java Copyright 1998-2017 Curt Hill
Required Parameters The height and width are special parameters They must be given in order that the browser knows the size of the applet to display However, they may be accessed from Java, just like any parameters Copyright 1998-2017 Curt Hill
Optional Parameters The HTML for a parameter is a tag, which is enclosed within the applet tag Parameters tags have three pieces: The PARAM tag label The name of the parameter The value of the parameter These are separated by blanks in the PARAM tag Copyright 1998-2017 Curt Hill
<PARAM name=p value=“parm value”> The name is how the parameter will be identified in Java Must be unique for this applet Not case sensitive The value is always a string Must be enclosed in quotes if it contains special characters Copyright 1998-2017 Curt Hill
Finally There is much more to know but not much of it is relevant to this class Although the library has reference material it is more common to use the web I am partial to: https://www.w3schools.com/ for both HTML and JavaScript If you find better sites let me know Copyright 1998-2017 Curt Hill