CSE3026: Software Engineering

Lab 2 : Basic HTMLScott Uk-Jin Lee

Software Engineering Lab Except where otherwise noted, the contents of this document are Copyright 2016 HyungLak Kim, , Scott Uk-Jin Lee. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

1

Basic lab instruction• You are advised to look up syntax and examples from the lecture slides.

• Ask TA or your classmates for help, if needed.

• Talk to your classmates to share ideas; but do not copy or share code.

• Complete all of the exercises in the allotted time.

• Before you leave, check in with a TA to get credit for your work.

2

Text EditorsThere are text editors to create a web page • Notepad++

• Aptana Studio

• Sublime Text

• Atom (Mac OS Only)

• Intellij

3

Lab 2 exercisesLab 2: Basic HTML - create a basic “About Me” HTML page. Because of Privacy, you don’t need to use actual information about you. This lab is consist of followings:

1. Basic “About Me” Page 2. Courses @ HYU 3. Favorite Movie, Thing, and Quote 4. Fun Facts About My Neighbours 5. YouTube Video 6. Short Quiz 7. Validation Link 8. Validate Your Page 9. Upload your page

4

Ex 1: Basic “About ME” PageCreate a page “AboutMe.html” The page should include the followings.

• page title: About your name!

• character encoding: UTF-8

• page heading: your name

• favicon : attach your favorite icon or image

• add a horizontal line

5

Ex 1: exampleAbout Me

6

Ex 2: Courses @ HYUCreate a list of course that you are taking right now at HYU. This part of the page should include the followings. • heading: My Course@HYU

indicate that the abbreviation, HYU, stands for “hanyang University”

• unordered list in the form of - Course Code: Course Title

7

This part of the example page describes courses that Scott teaches.

Ex 2: Courses @ HYU

8

Ex 3: Favorite MoviesCreate a table of your 3 favorite movies in reverse order. This part of the page should include the followings: • make a link to an interesting site about each movie, such as its IMDB page

• look up the most favourite movie on imdb.com and reproduce director, genre, and stars information about the film in a nested list under that movie’s bullet. • These info is in short topic:-> value paris, such as Genre: Comedy.

• Therefore, represent it as an HTML definition list

9

Ex 3: Example

10

Ex 3: Favorite ThingPresent images of your 3 favorite things. This part of the page should include the followings: • choose your thing, such as cars, drinks, places, people, ... • select your 3 favorite things • look up images of the 3 things with Google Images • add breif description about the things and present them in your page

11

Ex 3: ExampleThis part of the example page describes Hyunglak’s 3 favourite cars.

12

Ex 3: Favorite QuotePresent your favorite quote. This part of the page should include the followings: • choose your favorite quote and present it in your page A. represent your quote using blockquote

B. wrap the text with double quotation marks

C. emphasize the person from whom this quote comes and add a horizontal line in front using character entity

13

Ex 3: ExampleThis part of the example page describes Hyunglak’s favourite quote.

14

Ex 4: Fun Facts About NeighboursCreate a table that presents fun facts about your neighbours. This part of the page should include the followings: • the table with : A. caption describing the table

B. First Name and Facts as headings

C. use deleted and inserted texts

15

Ex 4: ExampleThis part of the example page describes fun facts about Hyunglak's SE Lab intern members.

16

Ex 5: YouTube VideoEmbed a YouTube video that you like: • select any YouTube video that you like and embed it in your page A. use iframe element of HTML5

B. chosen video must be playable when embedded

C. present a short description about the chosen video

17

Ex 5: ExampleThis part of the example page shows a short Youtube video embed in Hyunglak's "About Me" page.

18

Ex 6: Additional ContentPresent an additional content to your page. This part of the page should include the followings: • use one of new features in HTML5

19

Ex 6: ExampleThis part of the example page shows Hyunglak's favorite jazz song embedded in his "About Me" page.

20

Ex 7: Validation LinksAdd links on your page to the HTML using the URLs below. • image: http://selab.hanyang.ac.kr/courses/cse326/2016/problems/images/w3c-html.png

• link URL: https://validator.w3.org

• image : http://selab.hanyang.ac.kr/courses/cse326/2016/problems/images/w3c-css.png

• link URL: https://jigsaw.w3.org/css-validator

(These links work only if you view your page on server, not on your computer's hard drive.)

21

Ex 7: example

22

Ex 8: Validate your pageValidate the syntax of your HTML code

1. open http://validator.w3.org

2. validate your page by either • “Validate by File Upload” and then browse to your AboutMe.html file

• “Validate by Direct Input” and then copy.paste your code into the text box

3. If there are any errors, fix them all • try to get the green bar for 0 errors. “Warnings” are ok

• if you do not understand the error messages, ask TA for help

23

Ex 9: Upload your page• Use git and upload your page to your program file • Put your files in a folder named lab2 within git hub folder

• Check the page by viewing it in the git.

24

If you finish them all…If you finish all the exercises:

1. you can add any other content you like to your page

2. check in with a TA to get credit for your work

3. submit your file to TA’s email(Hyunglak Kim: jikuaij@naver.com or Gichan Lee: fantasyopy@gmail.com)(email title - [CSE3026]Lab02-2016xxxxYOURNAME_Finish)

4. you may be able to be dismissed

If you don’t finish all the exercises on time: 1. go home and finish all the exercises

2. submit your result to TA’s email (Hyunglak Kim: jikuaij@naver.com or Gichan Lee: fantasyopy@gmail.com) until midnight and you can get some marks but not full marks (email title - [CSE3026]Lab02-2016xxxxYOURNAME_Late)

3. you can’t get any marks if you submit result after midnight.

Great Work!25