Project
Learning Outcomes Pada akhir perkuliahan ini diharapkan mahasiswa mampu : Membuat dan mempresentasikan web yang sudah dibuat sesuai dengan prinsip-prinsip yang telah diajarkan
Outline Materi HTML Text Formatting Tags HTML Images Table Hyperlink CSS Formatting Text with Styles Layout with Styles
Top Ten Mistakes in Web Design Jakob Nielsen's Top Ten Mistakes in Web Design : Using Frames Gratuitous Use of Bleeding-Edge Technology Scrolling Text, Marquees, and Constantly Running Animations Complex URLs Orphan Pages Long Scrolling Pages Lack of Navigation Support Non-Standard Link Colors Outdated Information Overly Long Download Times
HTML HyperText Markup Language (HTML) is a markup language used to structure text and multimedia documents and to set up hypertext links between documents, used extensively on the World Wide Web. Basic HTML Tags : Tag Description <html> </html> Defines an HTML document <body> </body> Defines the document's body <h1> </h1> to <h6> </h6> Defines header 1 to header 6 <p> </p> Defines a paragraph <br> Inserts a single line break <hr> Defines a horizontal rule <!-- --> Defines a comment
Text Formatting Tags Tag Description <b> </b> Defines bold text <big> </big> Defines big text <em> </em> Defines emphasized text <i> </i> Defines italic text <small> </small> Defines small text <strong> </strong> Defines strong text <sub> </sub> Defines subscripted text <sup> </sup> Defines superscripted text
HTML Images In HTML, images are defined with the <img> tag. To display an image on a page, you need to use the src attribute. The value of the src attribute is the URL of the image you want to display on your page. The “alt” attribute is used to define an "alternate text" for an image. The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images.
Table Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
Hyperlink HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web : an HTML page, an image, a sound file, a movie, etc. The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
CSS Body element will be displayed in black text color Example : Body element will be displayed in black text color If the value is multiple words, put quotes around the value If you wish to specify more than one property, you must separate each property with a semicolon. You can group selectors. All header elements will be displayed in green text color
Formatting Text with Styles Property Description font-family: familyname To set the font family font-style: italic/oblique/normal To create italics/oblique/normal text font-weight: bold/normal To apply bold/normal formatting font-size: sizept, e.g., 12pt To set the font size line-height: sizept, e.g., 12pt To set the line height color: #rrggbb To set the text color background: #rrggbb To set the text background text-align: left/right/center/justify To align text text-decoration: underline/overline/line-through/blink/none To underline/overline/line-through/blink text
Layout with Styles Property Description height: size, e.g., 200 Setting the element’s height width: size, e.g., 200 Setting the element’s width border-top/bottom/left/right: thin/medium/thick or sizepx Setting the border padding-top/bottom/left/right: size, e.g., 10 Adding padding around the element margin-top/bottom/left/right: size, e.g., 10 Setting the margins around an element Vertical-align: baseline/middle/sub/super/text-top/text-bottom/top/bottom Aligning elements vertically
Pengumpulan Project Project di kumpulkan terakhir saat UAS Bila melewati batas , tetapi tidak lewat 3 hari , dikenakan pengurangan point Bila keterlambatan melebihi 3 hari maka tidak dinilai