ISI Programming Course - 01 - HTML

ISI Programming Class HTML Jungwon Seo | University of Stavanger

HyperText Markup Language

• HTML is a format to express complicated information with
a rule. Attribute value HTML is a format <a href="https://www.wikipedia.org/">A link to Wikipedia!</a> Element Opening tag Closing tag Content Attribute Attribute name

How does it work?

• Without a web browser, HTML ﬁle is just a
text ﬁle. • Web browser understands the HTML language and renders it to show the website to the human user. Web Browser

HTML Tags • The basic elements that make up HTML.
• There are many tags, but you don’t need to memorize everything.(https://www.w3schools.com/tags/) • However, it is important to use each tag for each purpose. (http://www.hospitalsites.org/blog/-the-most-common-html-tags) The list of the top 10 most used tags is as follows

Search Engine Optimization • Make your website more visible in
search engines (e.g., Google) • Often referred to as "natural", "organic", or "earned" results • If you don’t use proper tags for some contents, it is diﬃcult for the search engine to prioritize the content. <div>This is just image description</div> <div>This is a title</div> <div>This is a description</div> Which line is the most important content?

HTML Document Structure <!DOCTYPE html> <html> <head> .. </head> <body>
.. </body> </html> Metadata (information) Actual content

Let’s code

Things to keep in mind • Use lowercase when you
write tags. • Double check the spelling. • Match the pair (opening and closing tag) correctly. • Try to use copy and paste instead of typing everything. • Indent your html. • Google it ﬁrst!

Exercise-1: <title> • How to change the text in the
tab. Source Code Link

Exercise-2: <div> • A div tag deﬁnes a division (or
section) of a HTML document. • You can make most things with div. • You can change Color, size, gap, position, etc. Source Code Link

Exercise-3: <span> • How can we change the color of
this word in HTML? • block-level element vs. inline element Source Code Link

Exercise-4: <img> • How to link a local ﬁle and
remote ﬁle. • How to make a circular image. Source Code Link

Exercise-5: <a> • The anchor tag is used to link
the other page or other parts of a page. • Move to other parts. • Move to other pages. • Open from a new tab. Source Code Link

Exercise-6: <table> • It’s just a table with row and
column. • <table>, <thead>, <tbody>, <tr>, <td>, <th> • coldspan, rowspan • It’s useful when keeping the arrangement of the containers. Source Code Link

Exercise-7: <ul>, <ol> • Ordered list • Unordered list •
Mixed list Source Code Link

Exercise-8: <h#>, <p> • <h1>~<h6> • https://www.hobo-web.co.uk/headers/ • <p> with
<br> Source Code Link

Exercise-9: <input> • text, password, date, radio, checkbox, ﬁle •
select, textarea Source Code Link

Exercise-10: <iframe> • The website in the website? • Youtube
Source Code Link

Exercise-11: <video> • HTML5 tag • https://www.uis.no/ Source Code Link

ISI Programming Course - 01 - HTML

ISI Programming Course - 01 - HTML

Jungwon Seo

More Decks by Jungwon Seo

Other Decks in Technology

Featured

Transcript

ISI Programming Class HTML Jungwon Seo | University of Stavanger

HyperText Markup Language

• HTML is a format to express complicated information with

How does it work?

• Without a web browser, HTML ﬁle is just a

HTML Tags • The basic elements that make up HTML.

Search Engine Optimization • Make your website more visible in

HTML Document Structure <!DOCTYPE html> <html> <head> .. </head> <body>

Let’s code

Things to keep in mind • Use lowercase when you

Exercise-1: <title> • How to change the text in the

Exercise-2: <div> • A div tag deﬁnes a division (or

Exercise-3: <span> • How can we change the color of

Exercise-4: <img> • How to link a local ﬁle and

Exercise-5: <a> • The anchor tag is used to link

Exercise-6: <table> • It’s just a table with row and

Exercise-7: <ul>, <ol> • Ordered list • Unordered list •

Exercise-8: <h#>, <p> • <h1>~<h6> • https://www.hobo-web.co.uk/headers/ • <p> with

Exercise-9: <input> • text, password, date, radio, checkbox, ﬁle •

Exercise-10: <iframe> • The website in the website? • Youtube

Exercise-11: <video> • HTML5 tag • https://www.uis.no/ Source Code Link