Introduction

Web programming, HTML fundamentals, Git & Github

Kayumov Abduaziz
1
Today
● Course info

● What’s web programming?

● HTML fundamentals

● Hello, World!

● Git & Github

● How to submit assignments

2
Instructors

Kayumov Abduaziz Mukhammadali Khayotov

PhD in Computer & Information Security M.E. in Computer Vision

(Sejong University) (Sejong University)

Office: UCA 218 Office: UCA 218

Office hours: Wednesday, 2pm~4pm Office hours: Tuesdays, 2pm~4pm

Email: [Link]@[Link] Email: [Link]@[Link]

3
Instructors

2014 - 2018 2018 - 2020 2021 - 2023 2023 - now

Inha University Sejong

University

2014 - 2018 2019 - 2025 2025 - now

4
Course info: grading
● 30% => Assignments:

20% => lab assignments (every lab is graded)

10% => class assignments

● 30% => Midterm

15% => Team project demo (Week 7 during lab hours)

15% => Written exam (Week 8, 90 minutes written exam)

● 40% => Final (90 minutes written exam)

20% => Written exam (Week 16, 90 minutes written exam)

20% => Team project demo (Week 15 during lab hours)

5
Course info: two team projects
● Make a group of 4-5 students:

=> every team member should equally contribute (Github contribution charts)

● Deadlines: Week 6 Sunday midnight and Week 14 Sunday midnight

● Code review: done by Copilot or Gemini (TBD)

=> final review by the instructors

6
Course info: course policy
● Collaboration:

- Collaboration is allowed only in team assignments

- All the codes must be submitted individually

● Extensions:

No late submissions (easy to see in the commit history)

7
Course info: assignment submission
● Quizzes:

- Provided randomly, are usually submitted offline.

● Class assignments:

- must be submitted by assistant instructor preferences (usually by github)

● Team assignments:

- Commit history as the proof of participation in team assignments

8
Course communication
● Through university portal - Hero LMS:

- ask, see, download course materials in an official form

● Telegram - NUU - Web Programming (@nuu_se201)

- you can stay up to date with the latest news much easier

● Email us:

[Link]@[Link] or [Link]@[Link]

9
What’s Web Programming?
Web programming refers to the process of creating applications
and websites that run on the internet:

- Front end development: everything that the users interact

with directly in their web browsers - includes the design,
layout, and functionality of a website. Front-end
developers primarily use HTML, CSS (Cascading Style
Sheets), and JavaScript to create user interfaces.
- Back end development: involves the server-side of web
applications. Back-end developers work with databases,
server logic, and application programming interfaces
(APIs) to ensure that the front-end can communicate with
the server and retrieve or store data.

10
Full Stack Web Applications Architecture

11
Random quiz: Is ReactJS a framework?

12
ReactJS
ReactJS is actually a library, not a framework. It was developed by Meta (formerly
Facebook) and is used for building user interfaces, particularly for single-page
applications. The key difference is that a framework typically provides a complete
solution with built-in tools and conventions, while a library like React focuses on a
specific aspect of development and allows developers to choose additional tools
and libraries as needed.

React is often described as “unopinionated,” meaning it doesn’t enforce a specific

way of structuring your application. This flexibility allows developers to integrate
React with other libraries and frameworks according to their needs

13
ReactJS
A framework is a set of reusable software components that provide a structure for
developing applications. It acts as a foundation, allowing developers to build software
without starting from scratch. Here are some key points about frameworks:
- Structure and Reusability: Frameworks offer a predefined structure and reusable
components, which help streamline the development process.
- Consistency: They enforce consistent coding practices and standards, making it
easier for teams to collaborate.
- Efficiency: By providing common functionalities out-of-the-box, frameworks reduce
the amount of code developers need to write, speeding up development.
There are various types of frameworks, including web frameworks (e.g., Angular,
Django), mobile frameworks (e.g., React Native, Flutter), and backend frameworks (e.g.,
Spring, Express).

14
This course: technologies and concepts
● Browser Environment:
○ HTML/CSS/JavaScript – Markup, separation of content & style, reuse, scripting
○ Document Object Model (DOM) - Document Structure
● Browser Software:
○ Model View Controller, Single page applications, Responsive Design – [Link]
● Backend Communication:
○ API design – HTTP/AJAX/REST/GraphQL
○ Cookies/Sessions/State management – Storage/Trust
● Backend Implementation:
○ Web Server – HTTP request processing –Spring Boot
○ DBMS – Schema, Objects, CRUD, indexes, transactions – MongoDB or PostgreSQL
○ End-to-End – Scale and Security

15
Browser environment
● Traditional app: GUIs based on pixels
● Since 1970s software accessed mapped framebuffers (RGB)
● Toolkits build higher level GUI widgets (buttons, tables, text etc…)
● Web browsers display Documents described in HTML
● Until HTML5 and its canvas region, you couldn’t write in actual pixels (px
was not an actual pixel size)
● Make applications out of documents
● Early web apps: Multiple documents (pages) with ‘form’ tag for input
● Current web apps: use JavaScript to dynamically generate and
update documents

16
HTML - Hypertext Markup Language

● Markup Language is the combination of directives with content

● Directives can dictate presentation or describe content
● Initial idea was derived from 1960s (RUNOFF - 1964 at MIT)
● Example of a declarative language
● E.g.: <i>italics word</i>, <title> title words</title>
● Approach
● Annotate your information with tags
● HTML uses < > to denote tags

17
HTML - Hypertext Markup Language
● RUNOFF was one of the earliest text formatting programs, developed in the
1960s at MIT. It was used to format documents for printing and played a
significant role in the evolution of text processing. The name “RUNOFF” came
from the office jargon of the time, referring to the process of making copies of
documents.
● The idea behind RUNOFF influenced the development of later markup
languages, including HTML. Both RUNOFF and HTML share the concept of
using tags to define the structure and formatting of text. While RUNOFF was
primarily used for document formatting, HTML was designed for creating web
pages and became the foundation of the World Wide Web.

18
HTML tags

● Tags provide:
● Meaning of text:
● <h1> </h1> is a top level heading
● <p> </p> means paragraph
● <ul></ul> for unordered list (unordered bulleted <li>)
● Nesting tags is supported e.g.: <h1><i>some important</i>
info</h1>
● When nested document will form a tree

19
Understanding HTML
HTML is the standard markup language used to create web pages.
It provides the structure of a webpage by using a series of
elements or tags. Each HTML element can contain text, images,
links, and other media. Here are some key components of HTML:

● Elements: The building blocks of HTML, defined by tags.

For example, <h1> defines a top-level heading, while <p>
defines a paragraph.
● Attributes: Additional information about an element,
specified in the opening tag. For example, <a
href="[Link] uses the href attribute to
define the link's destination.
● Nesting: HTML elements can be nested within one another
to create a hierarchy. For example, a list can contain list
items, which can further contain links or images.

20
Basic structure of an HTML document

An HTML document has a specific structure that must be followed 21

Example text to try with HTML

SE201 Web Programming

This course is one of the good courses for you to take as a student.

This will help you understand web programming tools (not just generate
code)!

This course will inspire you to become a good web developer in the future.

22
Example text to try with HTML
<h1>SE201 Web Programming</h1>
<p>
This course is one of the good courses for you to take as a
<i> student. </i>:
</p>
<ul>
<li>
This will help you understand web programming tools (not just generate code)!
</li>
<li>
This course will inspire you to become a good web developer in the future.
</li>
</ul>

23
The beauty for the programmer’s eyes, but browser does not care:

<h1>SE201 Web Programming</h1>

<p>
This course is one of the good courses for you to take as a
<i> student. </i>:
</p>
<ul>
<li>
This will help you understand web programming tools (not just generate code)!
</li>
<li>
This course will inspire you to become a good web developer in the future.
</li>
</ul>

Notice the hierarchy of html elements.. 24

Example browser output

SE201 Web Programming

This course is one of the good courses for you to take as a student.

● This will help you understand web programming tools (not just
generate code)!
● This course will inspire you to become a good web developer in
the future.

25
HTML Evolution

● Influenced by browser implementation aspects:

What to do if you see “<p>Some text” (missing closing </p>)?
● Complain bitterly about malformed HTML.
● Figure out there was a missing </p>, add it, and continue
processing.
● Forked into HTML and XHTML (XML-based HTML)
● XHTML is more strict about adhering to proper syntax
● For the HTML class assignments (1, 2, and 3) we will use XHTML
● Users came to depend on browser aspects, so browsers couldn't
change

26
Example XHTML:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<html xmlns="[Link] xml:lang="en" lang="en">
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

27
Basic syntax rules for XHTML
Document: hierarchical collection of elements, starting with <html>
- Element: start tag, contents, end tag
- Elements may be nested
- Every element must have an explicit start and end
=> can use <foo .. /> as shorthand for <foo></foo>
- Start tags can contain attributes:
<img src="[Link]">
<input type="text" value="94301" name="zip">
<div class="header">

28
Need to handle special characters in content:
● To display a literal < or > in a document, use entities:
● &lt; Displays <
● &gt; Displays >
● &amp; Displays &
● &quot; Displays "
● &nbsp; Non breaking space (won’t insert a line break at this space)

Many other entities are defined for special characters.

Whitespace is not significant except in a few cases (e.g. textarea, pre tags)

29
XHTML document structure

30
Common tags

● <p> New paragraph

● <br> Force a line break within the same paragraph
● <h1>, <h2>, ... Headings
● <b>, <i> Boldface and italic
● <pre> Typically used for code: indented with a fixed-width font,
spaces are significant (e.g., newlines are preserved)
● <img> Images
● <a href="..."> Hyperlink to another Web page
● <!-- comments --> Comment tags

Search for “What’s the HTML tag for …” 31

Common tags

Search for “What’s the HTML tag for …” 32

Common tags

● <title> Specify a title for the page, which will appear in the title
bar for the browser window.
● <link> Include CSS stylesheets
● <script> Used to add Javascript to a page (can be used in body
as well)

Search for “What’s the HTML tag for …” 33

HTML vs. XHTML:

34
Another markup language: Markdown (.md files)

35
Speed vs Preciseness
Markdown language example output

36
Speed vs Preciseness
 How to submit
assignments on Github

37
Assignment submission
1. Join the course organization account on Github

2. You will be assigned a private repository

3. The assignments are given as the means of Github repositories

4. To submit an assignment, you should propose changes the private repository

in the form of “pull requests” (PRs).

5. Teachers & Copilot & Gemini will review your PR and merge them.

38
Assignment submission
Please It looks good Received it,
change this… to me! merging now..

Version1: Version2: Version3: Version3:

Assignment Your PR Your PR Your final
submission

Version1: Version2: Version3:

Your fork Your changes Your fixes

39
See you at the lab!

40
Setting up Git & Github

Check if Git is installed on your machine.

41
Setting up Git & Github

Feel free to choose any username

(does not have to be your student ID) 42
Setting up Git & Github

Sign in / up to Github and let us know your github usernames and student IDs,
we will now invite you to the course organization on Github. 43
Setting up Git & Github

Accept the invitation!

44
Setting up Git & Github

You should now find your username in the

students team. 45
Assignment submission

You should also find today’s lab repository - “lab1”.

46
Assignment submission
1. Open a new issue titled with your student ID: “240024”
2. Fork the assignment repository:
=> this creates your own copy of the repo.
3. Make changes to your own repository (forked repo):
=> do the assignment
4. Create a pull request to the assignment repository:
=> closes the issue you opened earlier
5. Gemini will review your pull request and provide recommendations
6. Fix the recommendations by making changes to your own repository

47
Assignment submission
Please It looks good Received it,
change this… to me! merging now..

Version1: Version2: Version3: Version3:

Assignment Your PR Your PR Your final
submission

Version1: Version2: Version3:

Your fork Your changes Your fixes

48
Assignment submission

Create a new issue titled with your student ID

49
Assignment submission

Choose the assignment issue template

50
 Assignment submission

Enter your student id here

51
Assignment submission

The assignment instructions should appear in

the issue description (also your issue is listed
in the issues tab)

52
Assignment submission

Fork the assignment repository

(=> creating your own copy of the repo) 53
Assignment submission

This is your own copy of the assignment repository 54

 Assignment submission
Please It looks good Received it,
change this… to me! merging now..

Version1: Version2: Version3: Version3:

Assignment Your PR Your PR Your final
submission

Version1: Version2: Version3:

Your fork Your changes Your fixes

55
You are here!
Assignment submission

Create a submission file in a folder titled with your student id 56

Assignment submission

Create a submission file in a folder titled with your student id 57

Assignment submission

You should see your submission folder and [Link],

notice this message saying “your branch is 1 commit ahead …”
58
Assignment submission
Please It looks good Received it,
change this… to me! merging now..

Version1: Version2: Version3: Version3:

Assignment Your PR Your PR Your final
submission

Version1: Version2: Version3:

Your fork Your changes Your fixes

59
You are here!
Assignment submission

Open your fork’s main page,

click “Contribute” to submit your answer.
60
Assignment submission

Leave a comment message that closes your own issue.

You can find the number of your issue, e.g. #1 61
Assignment submission

Gemini provides a summary of your changes and after some time leaves a code review 62
Assignment submission

When you scroll down in your PR page, Gemini leaves a code

review with explanations (sometimes annoying, maybe wrong in
some less probable cases).
63
Assignment submission
Please It looks good Received it,
change this… to me! merging now..

Version1: Version2: Version3: Version3:

Assignment Your PR Your PR Your final
submission

Version1: Version2: Version3:

Your fork Your changes Your fixes

64
You are here!
Assignment submission
Please carefully read the review messages and
modify your code to resolve them

For example, Gemini is now complaining that your

simple html file should adhere to the proper
semantics of latest HTML version.

65
Assignment submission

To reflect on the code review feedback, open your

fork’s repository and modify [Link] accordingly 66
Assignment submission

Commit the changes and ask for a review again

67
Assignment submission

You can also use Gemini commands to trigger more actions 68

Assignment submission

It looks good to Gemini, you can now resolve conversation

69
Assignment submission
Please It looks good Received it,
change this… to me! merging now..

Version1: Version2: Version3: Version3:

Assignment Your PR Your PR Your final
submission

Version1: Version2: Version3:

Your fork Your changes Your fixes

You are here! 70

Assignment submission

Before the assignment deadline, teachers will merge your PR

(which concludes a successful submission of your assignments) 71
Assignment submission

You can also use your issue as a “todo” list during assignment
submission. 72
Assignment submission
Please It looks good Received it,
change this… to me! merging now..

Version1: Version2: Version3: Version3:

Assignment Your PR Your PR Your final
submission

Version1: Version2: Version3:

Your fork Your changes Your fixes

You are here! 73

Final remarks
- Thoroughly reflect on Gemini’s comments (not just clicking the “Resolve
conversation” button or copy-pasting code from other GPTs).
- If you are sure that Gemini is hallucinating, you can resolve conversations.
- Your PRs are accepted just before the assignment deadlines, make you go
through these slides again.
- Your submission files should be inside the folder titled with your student id.

74
 Q1:
PRs are visible to everyone,
maybe others will copy from me!

75
 Blockchain approach:
Assignments usually require your own
individual approach, by making
everything transparent, we actually want
to avoid cheating.

76
 Goal:
To expose you to a real development
environment using assignments, not
nitpick about every detail of source code
and fight about plagiarism.

77
See you next time!

78