MDAD: Lab1 Briefing: Html and CSS

Elements and Tags

•An element is a logical piece of markup that occurs in a HTML document

•Every element is delimited by a pair of unique text strings (called tags) used to qualify it

•Tags always occur in pairs (start tag & end tag), the closing tag always having a forward slash (/) preceding it

eg. <title>Content of Element</title>

•Empty tags can occur alone and have a trailing forward slash

<br/> is the same as <br></br>

Commonly used Tags
<p> tag <h1>---<h6> tag <div> tag
<p style="color:red" >
<div style="color:Green; font-size:330%">

Try out:
https://www.w3schools.com/html/html_basic.asp

All tag and attribute names should be lowercase (by convention) eg. <p>Hello World</p>
Empty tags must have an extra slash at the end (e.g. the line break <br />)
Never leave out an end tag
Usually save files with the extension .html
Tags must be correctly nested
<div><p>emboldened text</p></div>
<div> (“division”) element contains one or more blocks of text, images, and other content that make up a section of a document
usually use <div> to apply style rules to a section of a document

Hyperlinks

Hyperlinks are used to link to another HTML document
Example

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_w3schools

Image+ Hyperlink

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_image

Html Form

https://www.w3schools.com/html/html_forms.asp

use placeholder
<input type="text" id="fname" name="fname" placeholder= "enter name">

use required

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit

Post and Get Method

https://www.w3schools.com/php/php_forms.asp

Difference between post and get

https://www.w3schools.com/tags/ref_httpmethods.asp

CSS Introduction

allows style-related commands to be applied to the HTML document

This will enable your document to have a consistent look-and-feel across a website

How to Apply CSS Styles to a HTML Document

Three ways:

Using the <link> element to apply an External Style Sheet
Using the <style> element to apply an Internal Style Sheet
Specify CSS style with the style attribute (inline style)

https://www.w3schools.com/css/css_howto.asp

using Internal Style Sheet
https://www.w3schools.com/css/tryit.asp?filename=trycss_default

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

using External Style Sheet

https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_external

example.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

mystyle.css

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

apply Internal Style Sheet

https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_inline

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Html Table

<html>
<body>
<table border='1'>


<tr> 
    <th>   admin num  </th>       <th>   phone </th>   <th>   address </th>    
</tr>

<tr> 
    <td>   1 </td>       <td>   2 </td>   <td>   3 </td>             
</tr>

</table>
  
</body>
</html>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_document

W3.CSS Buttons
https://www.w3schools.com/w3css/w3css_buttons.asp
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_buttons_bar
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_text_special
https://www.w3schools.com/html/html_styles.asp

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>Buttons (w3-button)</h2>
  <input type="button" class="w3-button w3-black" value="Input Button">
  <button class="w3-button w3-black">Button Button</button>
  <a href="#" class="w3-button w3-black">Link Button</a>
</div>



</body>
</html>

Button as a hyperlink

<input type="button" onclick="location.href='https://google.com';" value="Go to Google" />

MDAD

Lab1 Briefing: Html and CSS

No comments:

Post a Comment