Introduce to Design Web Abdi Pandu Kusuma, S.Kom., M.T
Definisi Desain Web Design: The process to make and create a new object. Web: An interface of information in the form of text, images, sound, animation, and other multimedia data that are interconnected with one another. Web Design: The process of creating a web appearance that includes the layout of web pages, content, and graphic design.
Konsep Dasar HTTP HTTP HyperText Transfer Protocol Hypertext: Can be seen with a program called a web browser that takes information (documents / web pages) from the web server and displays it on the monitor screen. HTTP a standard request / response between a client and a server.
Client Side Scripting It often embedded in HTML documents, but can also be in a separate file referenced by the document that uses it. • It can also contain commands that must be followed by a web browser if the user interacts with a document in a certain way, for example the use of hyperlinks.
Server Side Scripting Web Server technology where requests by users are fulfilled by running scripts directly on the web server to produce dynamic HTML pages. Generally provides interactive websites on databases and other data storage. The main advantage is the ability to manage responses based on user requirements, access rights, or queries into the data store. For example: PHP, ASP, JSP, Ajax, etc.
??? ANY QUESTION ???
HTML Konsep HTML Concept. Basic Tag of HTML. Basic text formatting. Abdi Pandu Kusuma, S.Kom., M.T
Introduce
Konsep HTML HTML ??? HTML : Display format used to display web pages. It consists of certain symbols which are often called tags which are always surrounded by <html> </html> tags. HTML files generally have the suffix * .htm or * .html.
Konsep HTML HTML Advantages The font format can use various types, sizes, colors, etc. The ability to insert hyperlinks that point to other document pages. The ability to manipulate tables. The ability to insert images in html documents and images can also be used for hyperlink maps. The ability to interact with users using forms. HTML Disadvantages Not typesetting language. The appearance might be different for different browsers.
HTML General Form <html> <head> <title> </title> </head> <body> .................... </body> </html>
HTML General Form Tag Fungsi <h> Displays headings in HTML <p> Make paragraph in HTML <br> Make a new line. <b> To bold text <i> To italic text <u> To underline text <strong> To bold text <sup> To reduce the text size with the position raised to the top ½ space <sub> To reduce the size of the text with the position lowered down ½ space <!-- > To make a comment
First Training Showing the following display: Penyelesaian:
Second Training Showing the following display: Penyelesaian:
Third Training Showing the following display:
HTML Advance Abdi Pandu Kusuma, S.Kom, M.T HTML Link
HTML Link Link --> ?? Link --> A way to link one page to another. Tag Link: Tag Fungsi <a> General Form: <a href=“... .html”> Teks </a> Links are divided into three types: 1. Relative Link 2. Absolute Link 3. Link with the same document
Relative Link Creating a link from one page to another on the same computer can be done by writing directly the file name. 1a Training: Then in the sentence “Sejarah Kota Blitar” following <a href> tag is added. <a href=\"latihan1b.html\"> Sejarah Kota Blitar </a>
Relative Link 1b Training:
Absolute Link Creating links to other web pages that are on other websites on the internet is done by writing the URL name and file name. 2th Training: Then in the sentence “Youtube” following <a href> tag is added. <a href=\"http://youtube.com\"> Youtube </a>
Link with the same document This type of link is used if the document is too long, so if displayed in the browser will require us to scroll the layer repeatedly. To make it easier, links are made between sections in an HTML document. 3rd training:
Link with the same document
LIST Abdi Pandu Kusuma, S.kom., M.T
Definisi List • List ?? • List to group data both sequential and non- sequential. • List Forms: Ordered List. Unordered List. Nested List. Definition List.
Ordered List • Order List used to make a list sorted by numbers and letters. • Tag Link: • The ordered list uses the opening <ol> and closing </ol> tags, while for listing each item using the <li> tag as the opening and </li> as the closing. • Form: • <ol> • <li> .... • <li> .... • </ol>
Ordered List • The <ol> tag has several attributes, including: Type Means I Numbers are displayed with uppercase Roman i numerals A Numbers are displayed with lowercase Roman a numerals Numbers are displayed in capital letters Numbers are displayed in lowercase alphabet
1st Training • Display the following webpage.
Unordered List • Unordered List used to create an ordered list other than numbers and letters, using symbols. • Tag Link: • The ordered list uses the opening <ul> and closing </ul> tags, while for listing each item using the <li> tag as the opening and </li> as the closing. • Form: • <ul> • <li> .... • <li> .... • </ul>
Unordered List • The <ul> tag has several attributes, including: Type Means Circle Disc Circle Bullet Square Point Bullet Square Bullet
2ND Training • Display the following webpage.
Definition List • Definition List used to display the list is more protruding to the right than the previous list. • Tag Link: • The Definition List is enclosed in the <DL> ... </DL> tag and the <DT> tag specifies the term definition and the <DD> tag determines the definition itself. • Form: • <dl> • <dt> .... </dt> • <dd> .... </dd> • </dl>
3Rd Training • Display the following webpage.
Nested List • Nested List used nested, that means in the list there is a list item again. • 4Th Training: • Display the following webpage.
??? ANY QUESTION ???
Task 1 • This task is done based on groups that have been formed by lecturers. • This task displays the web with paragraphs beginning with a minimum of 100 words, followed by the use of a list according to the lectures instructions. • The theme web is about The spread of Covid-19 in the world. • Web pages consist of at least 2 pages. • Upload the html files in the form of RAR files via private WA until January, 10th 2022 in 6.00 PM. • File name format “Tugas1_NIM_Name_SP DesWeb”.
Search
Read the Text Version
- 1 - 36
Pages:
