Html is a kind of sgml (Standardized general markup language)

Yüklə 3,71 Mb.

tarix	07.11.2018
ölçüsü	3,71 Mb.
	#78907

HTML is a kind of SGML (Standardized general markup language)

HTML is a kind of SGML (Standardized general markup language)

SGML was invented by IBM and others as a way of defining parts of a document COMPLETELY APART FROM HOW THE DOCUMENT WAS FORMATTED.

HTML is a simpler form of SGML, but with a similar goal.

The original idea of HTML was to define the parts of the document and their relation to one another without defining what it was supposed to look like.
The look of the document would be decided by the client (browser) and its limitations.

For example, a document would look different on a PDA than on your screen or on your cellphone.
Or in IE vs. Netscape vs. Opera vs….

But with the explosive growth of the Web, HTML has become much more.

But with the explosive growth of the Web, HTML has become much more.

Now, people want to control the look-and-feel of the page down to the pixels and fonts.
Plus, we want to grab information more easily out of Web pages.

Leading to XML, the eXtensible Markup Language.
XML allows for new kinds of markup languages (that, say, explicitly identify prices or stock ticker codes) for business purposes.

Original HTML: Simple, what the earliest browsers understood.

Original HTML: Simple, what the earliest browsers understood.
CSS, Cascading Style Sheets

Ways of defining more of the formatting instructions than HTML allowed.

XHTML: HTML re-defined in terms of XML.

A little more complicated to use, but more standardized, more flexible, more powerful.
It's the future of where the Web is going.

Bigger sites should use XHTML and CSS

Bigger sites should use XHTML and CSS
XHTML enforces accessibility requirements so that your documents can be read by Braille browsers and audio browsers.
HTML is easiest for simple websites.
For most of this lecture, we'll be focusing on XHTML, but we'll just use “HTML” generically.

We're not going to get into much of the formatting side of XHTML nor CSS—detailed, and isn't the same on all browsers.

A markup language adds tags to regular text to identify its parts.

A markup language adds tags to regular text to identify its parts.
A tag in HTML is enclosed by .
Most tags have a starting tag and an ending tag.

A paragraph is identified by a
at its start and a
at its end.
A heading is identified by a
at its start and a
at its end.

We enter our text and our tags in just a plain ole ordinary text file.

We enter our text and our tags in just a plain ole ordinary text file.
Use an extension of “.html” (“.htm” if your computer only allows three characters) to indicate HTML.
JES works just fine for editing and saving HTML files.

Just don't try to load them!

You start with a DOCTYPE

You start with a DOCTYPE

It tells browsers what kind of language you're using below.

The whole document is enclosed in tags.

The heading is enclosed with

That's where you put the

The body is enclosed with

Of course, it is!
- Of course, it is!
- The only difference between this page and one on the Web is that the one on the Web (a) has been uploaded to a Web server and (b) placed in a directory that the Web server can access.
It’ll probably work.
- It’ll probably work.
- Browsers have developed to deal with all kinds of weird HTML.
We're simplifying these tags a bit.
- We're simplifying these tags a bit.
- More can go in the
- The tag can also set colors.
You know decimal numbers (base 10)
- You know decimal numbers (base 10)
- You've heard a little about binary (base 2)
- Hexadecimal is base 16
#FF0000 is Red
- #FF0000 is Red
- #0000FF is Blue
- #000000 is black
- #FFFFFF is white
There are six levels of headings defined in HTML.
- There are six levels of headings defined in HTML.
- Styles
Can control type face, color, or size
- Can control type face, color, or size
- A Simple Heading
- This is in helvetica
- Happy Saint Patrick's Day!
- This is a bit bigger
- Line breaks are part of formatting, not content, so they were added grudgingly to HTML.
  - Line breaks are part of formatting, not content, so they were added grudgingly to HTML.
  - Line breaks don't have text within them, so they include the ending “\” within themselves.
  - The Simplest Possible Web Page
  - A Simple Heading
  - This is a paragraph in the simplest
  - possible Web page.
  - Like break, it's a standalone tag.
    - Like break, it's a standalone tag.
    You can specify width and height in image tags.
    - You can specify width and height in image tags.
    - A Simple Heading
    - Some browsers (like audio or Braille) can't show images.
      - Some browsers (like audio or Braille) can't show images.
      - You can include alternative text to be displayed instead of the image in those cases.
      align=“left” or align=“right” to float an image
      - align=“left” or align=“right” to float an image
      - hspace=“10” or vspace=“10” to add 10 pixels to left and right, or top and bottom
      - align=“texttop” will align with top of corresponding text.
      Links have two main parts to them:
      - Links have two main parts to them:
      - The link tag is “a” for “anchor”
      - Mark Guzdial
      Ordered lists (numbered)
      - Ordered lists (numbered)
      - Unordered lists (bulleted)
      Column 1 Column 2
      Element in column 1 Element in column 2
    Frames
    - Frames
    - Divisions
    - Horizontal rules
    - Applets, Javascript, etc.
    View source all the time, especially when there's something new and cool that you've never seen before.
    - View source all the time, especially when there's something new and cool that you've never seen before.
    - There are lots of good on-line tutorials.
    - There are many good books.
    Using HTML is called “coding” and it is about getting your codes right.
    - Using HTML is called “coding” and it is about getting your codes right.
    - But it's not about coding programs.
    - HTML has no
    - Bottom line: HTML does not communicate process!
    def makePage():
    - def makePage():
    - file=open("generated.html","wt")
    - file.write("""
    - The Simplest Possible Web Page
    - A Simple Heading
    - Some simple text.
    - By generating a catalog as Web pages.
      - By generating a catalog as Web pages.
      - Nobody types up all those product HTML pages.
      - Rather, the data is in a database, and there are programs that put the data into a database.
      def makeCatalog(product, image, price):
      - def makeCatalog(product, image, price):
      - file=open(getMediaPath("catalog.html"),"wt")
      - body = """
      - Catalog Page for:"""+ product+'''
      - '''+product+""" is the greatest!
      - You are so lucky to have found this page!
      - You have the opportunity to buy """+product+"""
      - for the low, low price of $"""+str(price)+'''.
      - Just take a look at this beauty!
      - Get one today!
      - >>> makeCatalog("Seahorses","seahorses.jpg" ,32.75)
        
        >>> makeCatalog("Seahorses","seahorses.jpg" ,32.75)
        
        def makeHomePage(name, interest):
        
        def makeHomePage(name, interest):
        
        file=open(getMediaPath("homepage.html"),"wt")
        
        file.write("""
        
        """+name+"""'s <a href="/document-outline-la84-foundation-home-page.html">Home Page</a>
        
        Welcome to """+name+"""'s Home Page
        
        Hi! I am """+name+""". This is my home page!
        
        I am interested in """+interest+"""
        
        Barb's Home Page
        
        Welcome to Barb's Home Page
        
        Hi! I am Barb. This is my home page!
        
        I am interested in horses
        
        def makeHomePage(name, interest):
        
        def makeHomePage(name, interest):
        
        file=open(getMediaPath("homepage.html"),"wt")
        
        file.write(doctype())
        
        file.write(title(name+"'s Home Page"))
        
        file.write(body("""
        
        Welcome to """+name+"""'s Home Page
        
        Hi! I am
        
        """+name+""". This is my home page! I am interested in
        
        """+interest+"""
        """))
        
        file.close()
        
        def doctype():
        
        return ''
        
        def title(titlestring):
        
        return ""+titlestring+""
        
        def body(bodystring):
        
        return ""+bodystring+"
        
        We've learned a lot of ways of generating textual information over the last weeks.
        
        We've learned a lot of ways of generating textual information over the last weeks.
        
        We can use these to create all kinds of Web pages.
        
        Grabbing information out of directories using the os module
        
        Grabbing information out of other Web pages
        
        Generating random sentences
        
        Generating Web pages from databases
        
        import os
        
        import os
        
        def makeSamplePage(directory):
        
        samplesFile=open(directory+"/samples.html","wt")
        
        samplesFile.write(doctype())
        
        samplesFile.write(title("Samples from "+directory))
        
        # Now, let's make up the string that will be the body.
        
        samples="
        Samples from "+directory+"
        "
        
        for file in os.listdir(directory):
        
        if file.endswith(".jpg"):
        
        samples=samples+"
        Filename: "+file
        
        samples=samples+'
        '
        
        samplesFile.write(body(samples))
        
        samplesFile.close()
        
        import urllib
        
        import urllib
        
        import random
        
        def makeHomePage(name,interests):
        
        file=open(getMediaPath("homepage.html"),"wt")
        
        file.write(doctype())
        
        file.write(title(name+"'s Home Page"))
        
        text = "
        Welcome to "+name+"'s Home Page
        "
        
        text += "
        Hi! I am "+name+". This is my home page!"
        
        text += " I am interested in "+interests+"
        "
        
        text += "
        Random thought for the day: "+tagline()+"
        "
        
        file.write(body(text))
        
        file.close()
        
        def tagline():
        
        def tagline():
        
        tags = []
        
        tags += ["After all is said and done, more is said than done."]
        
        tags += ["Save time... see it my way."]
        
        tags += ["This message transmitted on 100% recycled electrons."]
        
        tags += ["Nostalgia isn't what it used to be."]
        
        tags += ["When you're in up over your head, the first thing to do is close your mouth."]
        
        tags += ["I hit the CTRL key but I'm still not in control!"]
        
        tags += ["Willyoupleasehelpmefixmykeyboard?Thespacebarisbroken!"]
        
        return random.choice(tags)
        
        Imagine that you could have this program run every 30 minutes, and immediately copy (FTP) the result up to your Web site.
        
        Imagine that you could have this program run every 30 minutes, and immediately copy (FTP) the result up to your Web site.
        
        The temperature would be updated every 30 minutes.
        
        A random sentence would be generated every 30 minutes.
        
        Suggestion: You could do this now!
        
        Most operating systems have some way to do tasks like this (see the Scheduled Tasks control panel in Windows, crontab in Macs and Linux)
        
        You've seen how to do FTP automatically.
        
        On the right is all the code for the home page program.
        
        On the right is all the code for the home page program.
        
        Barely fits on the screen at 8 point font size!
        
        But we only had to worry about a dozen lines of it!
        
        Why?
        
        We used more functions that allowed us to hide away detail that we didn't want to see anymore!
        
        But it mostly comes from databases.
        
        But it mostly comes from databases.
        
        Every major website generates its web pages from a database.
        
        >>> import anydbm
        
        >>> import anydbm
        
        >>> db=anydbm.open("news","c")
        
        >>> db["headline"]="Katie turns 8!"
        
        >>> db["story"]="""My daughter, Katie, turned 8 years old yesterday. She had a great birthday. Grandma and Grandpa came over. The previous weekend, she had three of her friends over for a sleepover then a morning run to Dave and Buster's."""
        
        >>> db.close()
        
        import urllib
        
        import urllib
        
        import random
        
        import anydbm
        
        def makeHomePage(name,interests):
        
        file=open(getMediaPath("homepage.html"),"wt")
        
        file.write(doctype())
        
        file.write(title(name+"'s Home Page"))
        
        text = "
        Welcome to "+name+"'s Home Page
        "
        
        text += "
        Hi! I am "+name+". This is my home page!"
        
        text += " I am interested in "+interests+"
        "
        
        text += "
        Random thought for the day: "+tagline()+"
        "
        
        # Import the database content
        
        db=anydbm.open(getMediaPath("news"),"r")
        
        text += "
        Latest news:"+db["headline"]+"
        "
        
        text += "
        "+db["story"]+"
        "
        
        file.write(body(text))
        
        file.close()
        
        Imagine that you have a bunch of reporters who are entering stories and headlines into a shared database.
        
        Imagine that you have a bunch of reporters who are entering stories and headlines into a shared database.
        
        Or just imagine a separate interface to let you enter stories into your own database.
        
        And again, at regular intervals, HTML pages are generated and uploaded via FTP onto Web servers.
        
        Now you know how CNN.com works!
        
        Now you know why databases are a big deal for Web developers!
        
        For CNN.com:
        
        For CNN.com:
        
        Can have multiple authors and editors creating multiple stories distributed all over a network.
        
        Can pull the content automatically via a program and merge all the stories into one big website
        
        Works similarly for other kinds of large websites
        
        Amazon.com
        
        Where do you think their catalog and review is stored?
        
        EBay.com
        
        Where do you think all those pictures and descriptions and bid information is stored?
        
        Rather: Why not just use files?
        
        Rather: Why not just use files?
        
        Why do we care about using some extra software for storing our bytes?
        
        Databases provide efficient access to data in a standardized mechanism.
        
        Databases are fast.
        
        Databases can be accessed from more than one place in more than one way.
        
        Databases store relations between data
        
        Filenames are indexed just by name.
        
        Filenames are indexed just by name.
        
        Usually, you care about information that is found by something other than a filename.
        
        For example, you may care about someone's information identified by last name or by SSN or even birthdate or city/state of residence.
        
        There are many different standard databases.
        
        There are many different standard databases.
        
        In the UNIX and open source markets: bsddb, gdbm, MySQL
        
        In the commercial markets: Microsoft Access, Informix, Oracle, Sybase
        
        Information stored in a standard database can be accessed and manipulated via many different tools and languages.
        
        Recall our list representation of pixels.
        
        Recall our list representation of pixels.
        
        It was just a list of five numbers.
        
        Who knew that the first two numbers were x and y positions, and the last three were RGB values?
        
        Only us—it wasn't recorded anywhere.
        
        Databases can store names for the fields of data
        
        They can store which fields are important (and thus indexed for rapid access), and how fields are related (e.g., that each pixel has three color components, that each student has one transcript)
        
        >>> import anydbm
        
        >>> import anydbm
        
        >>> db = anydbm.open("mydbm","c")
        
        >>> db["fred"] = "My wife is Wilma."
        
        >>> db["barney"] = "My wife is Betty."
        
        >>> db.close()
        
        >>> db = anydbm.open("mydbm","r")
        
        >>> db = anydbm.open("mydbm","r")
        
        >>> print db.keys()
        
        ['barney', 'fred']
        
        >>> print db['barney']
        
        My wife is Betty.
        
        >>> for k in db.keys():
        
        ... print db[k]
        
        ...
        
        My wife is Betty.
        
        My wife is Wilma.
        
        >>> db.close()
        
        Keys and values can only be simple strings.
        
        Keys and values can only be simple strings.
        
        Can only have a single index.
        
        Can't index, say, on last name and SSN.
        
        Doesn't store field names.
        
        There's no real search or manipulation capability built in other than simply using Python.
        
        >>> import shelve
        
        >>> import shelve
        
        >>> db=shelve.open("myshelf","c")
        
        >>> db["one"]=["This is",["a","list"]]
        
        >>> db["two"]=12
        
        >>> db.close()
        
        >>> db=shelve.open("myshelf","r")
        
        >>> print db.keys()
        
        ['two', 'one']
        
        >>> print db['one']
        
        ['This is', ['a', 'list']]
        
        >>> print db['two']
        
        12
        
        Can we use the shelve module to store and retrieve our media?
        
        Can we use the shelve module to store and retrieve our media?
        
        It's not made for data like that.
        
        Lists of pictures didn't come back from the database the way they were stored.
        
        Lists got mangled: Sub-lists in sub-lists, etc.
        
        Media have many, many more elements than simple databases can handle.
        
        Modern databases are mostly relational
        
        Modern databases are mostly relational
        
        Relational databases store information in tables where columns of information are named and rows of data are assumed to be related.
        
        You work with multiple tables to store complex relationships.
        
        What picture is Brittany in?
        
        What picture is Brittany in?
        
        Look up her ID in the student table
        
        Look up the corresponding PictureID in the PictureID-StudentID table
        
        Look up the picture in the Picture table
        
        Answer: Class1.jpg
        
        Who is in “Class1.jpg”?
        
        Who is in “Class1.jpg”?
        
        Look up the picture in the Picture table to get the ID
        
        Look up the corresponding PictureID in the PictureID-StudentID table
        
        Look up the StudentNames in the Student picture
        
        Answer: Katie and Brittany
        
        We call this kind of access across multiple tables a join
        
        We call this kind of access across multiple tables a join
        
        By joining tables, we can represent more complex relationships than with just a single table.
        
        Most database systems provide the ability to join tables.
        
        Joining works better if the tables are well-formed:
        
        Simple
        
        Containing only a single relation per row
        
        We can create structures like relational databases using our existing Python tools.
        
        We can create structures like relational databases using our existing Python tools.
        
        We start by introducing hash tables (also called associative arrays)
        
        Think of these as arrays whose indices are strings, not numbers
        
        >>> row={'StudentName':'Katie','StudentID':'S1'}
        
        >>> row={'StudentName':'Katie','StudentID':'S1'}
        
        >>> print row
        
        {'StudentID': 'S1', 'StudentName': 'Katie'}
        
        >>> print row['StudentID']
        
        S1
        
        >>> print row['StudenName']
        
        Attempt to access a key that is not in a dictionary.
        
        >>> print row['StudentName']
        
        Katie
        
        >>> picturerow = {}
        
        >>> picturerow = {}
        
        >>> picturerow['Picture']='Class1.jpg'
        
        >>> picturerow['PictureID']='P1'
        
        >>> print picturerow
        
        {'Picture': 'Class1.jpg', 'PictureID': 'P1'}
        
        >>> print picturerow['Picture']
        
        Class1.jpg
        
        For each row of the table, we can use a hash table.
        
        For each row of the table, we can use a hash table.
        
        We can store collections of rows in the same database.
        
        We search for something by using a for loop on the keys() of the database
        
        import shelve
        
        import shelve
        
        def createDatabases():
        
        #Create Student Database
        
        students=shelve.open("students.db","c")
        
        row = {'StudentName':'Katie','StudentID':'S1'}
        
        students['S1']=row
        
        row = {'StudentName':'Brittany','StudentID':'S2'}
        
        students['S2']=row
        
        row = {'StudentName':'Carrie','StudentID':'S3'}
        
        students['S3']=row
        
        students.close()
        
        def whoInClass1():
        
        def whoInClass1():
        
        # Get the pictureID
        
        pictures=shelve.open("pictures.db","r")
        
        for key in pictures.keys():
        
        row = pictures[key]
        
        if row['Picture'] == 'Class1.jpg':
        
        id = row['PictureID']
        
        pictures.close()
        
        >>> whoInClass1()
        
        >>> whoInClass1()
        
        We're looking for: ['S2', 'S1']
        
        Brittany is in the picture
        
        Katie is in the picture
        
        We're going to use an example using MySQL
        
        We're going to use an example using MySQL
        
        MySQL is a popular open source database that runs on many platforms.
        
        It's powerful and can handle large, complex table manipulations.
        
        The goal is not for you to learn to use MySQL.
        
        Very similar things can be done with Microsoft Access, SimpleDB/InstantDB, Oracle, Informix.
        
        Just using MySQL as an example.
        
        Making Use of Python by Rashi Gupta (Wiley: 2002)
        
        Making Use of Python by Rashi Gupta (Wiley: 2002)
        
        Python Programming with the Java Class Libraries by Richard Hightower (Addison-Wesley: 2003)
        
        If we ask you to do any database work on assignment, it will only be with anydbm and shelve.
        
        If we ask you to do any database work on assignment, it will only be with anydbm and shelve.
        
        However, if you do any database work in your professional life, you will be using relational databases and SQL.
        
        We won't be asking you to do that for homework in this class.
        
        The next few slides give you the pointers on how to set up MySQL on your own computer.
        
        But it's not for the faint of heart!
        
        If you'd like to avoid technical details, ignore the next FOUR slides
        
        Go to http://www.mysql.com/downloads/index.html
        
        Go to http://www.mysql.com/downloads/index.html
        
        Download and install mySQL
        
        Suggestion: Download and install mySQLcc (Command Center)
        
        Run the Command Center to create a connection
        
        Automatically also creates a database connection named “Test”
        
        Run “mysqld” to get MySQL running (in the background)
        
        You have to modify your JES to work with MySQL
        
        You have to modify your JES to work with MySQL
        
        anydbm and shelve are built into JES, but not the MySQL connection
        
        Download the MySQL connection for Java from the MySQL web site.
        
        Place the .jar file that you download in your JES\jython “Lib” folder
        
        The following is how you do it in Jython to talk to MySQL.
        
        The following is how you do it in Jython to talk to MySQL.
        
        Talking to Python is different only for this slide. The rest is the same.
        
        All these details are hard to remember, so hide it all in a function and just say con = getConnection()
        
        All these details are hard to remember, so hide it all in a function and just say con = getConnection()
        
        Once you have a database connection (called a cursor in SQL), you can start executing commands in your database using the execute method, e.g.
        
        Once you have a database connection (called a cursor in SQL), you can start executing commands in your database using the execute method, e.g.
        
        SQL is usually pronounced “S.Q.L.” or “Sequel”
        
        SQL is usually pronounced “S.Q.L.” or “Sequel”
        
        It's a language for database creation and manipulation.
        
        Yes, a whole new language, like Python or Java
        
        It actually has several parts, such as DDL (Data Definition Language) and DML (Data Manipulation Language), but we're not going to cover each part.
        
        We're not going to cover all of SQL
        
        There's a lot there
        
        And what's there depends, on part, on the database you're using.
        
        Create table tablename (columnname datatype,…)
        
        Create table tablename (columnname datatype,…)
        
        Tablename is the name you want to use for the table
        
        Columnname is what you want to call that field of information.
        
        Datatype is what kind of data you're going to store there.
        
        Examples: NUMERIC, INT, FLOAT, DATE, TIME, YEAR, VARCHAR(number-of-bytes), TEXT
        
        We can define some columns as index fields, and then create an index based on those fields, which speeds access.
        
        Insert into tablename values (columvalue1, columnvalue2…)
        
        Insert into tablename values (columvalue1, columnvalue2…)
        
        For our Person table:
        
        con.execute('insert into Person values ("Mark",40)')
        
        Here's where those two kinds of quotes comes in handy!
        
        Select column1,column2 from tablename
        
        Select column1,column2 from tablename
        
        Select column1,column2 from tablename where condition
        
        Select * from Person
        
        Select name,age from Person
        
        Select * from Person where age>40
        
        Select name,age from Person where age>40
        
        When you use a select from Python,
        
        When you use a select from Python,
        
        Your cursor has a variable rowcount that tells you how many rows were selected.
        
        This is called an instance variable
        
        It's a variable known just to that object, similar to how a method is a function known just to that object.
        
        Method fetchone() gives you the next selected row.
        
        Fetchone() returns a list
        
        >>> con.execute("select name,age from Person")
        
        >>> con.execute("select name,age from Person")
        
        >>> print con.rowcount
        
        3
        
        >>> print con.fetchone()
        
        ('Mark', 40)
        
        >>> print con.fetchone()
        
        ('Barb', 41)
        
        >>> print con.fetchone()
        
        ('Brian', 36)
        
        def showPersons(con):
        
        def showPersons(con):
        
        con.execute("select name, age from Person")
        
        for i in range(0,con.rowcount):
        
        results=con.fetchone()
        
        print results[0]+" is "+str(results[1])+" years old"
        
        >>> showPersons(con)
        
        >>> showPersons(con)
        
        Mark is 40 years old
        
        Barb is 41 years old
        
        Brian is 36 years old
        
        def showSomePersons(con, condition):
        
        def showSomePersons(con, condition):
        
        con.execute("select name, age from Person "+condition)
        
        for i in range(0,con.rowcount):
        
        results=con.fetchone()
        
        print results[0]+" is "+str(results[1])+" years old"
        
        >>> showSomePersons(con,"where age >= 40")
        
        >>> showSomePersons(con,"where age >= 40")
        
        Mark is 40 years old
        
        Barb is 41 years old
        
        Why are we doing the conditional show?
        
        Why are we doing the conditional show?
        
        First, to show that we can have tests on our queries which makes processing easier.
        
        Second, because this is how we're going to generate HTML: By assembling pieces as strings.
        
        Answering: What picture is Brittany in?
        
        Answering: What picture is Brittany in?
        
        Select
        
        p.picture,
        
        s.studentName
        
        From
        
        Students as s,
        
        IDs as i,
        
        Pictures as p
        
        Where
        
        (s.studentName=“Brittany”) and
        
        (s.studentID=i.studentID) and
        
        (i.pictureID=p.pictureID)