Scribd
Upload
10 views2 pages

Web Systems MR

Uploaded by

Israel Batoon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views2 pages

Web Systems MR

Uploaded by

Israel Batoon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML -you can use it to place notifications and reminders in your HTML code

-add comments to your HTML source by using the following syntax:


Web System/Development <!-- Write your comments here -->
-the tasks associated with developing websites for hosting via internet.
Web Page COLORS
-A document on the Web is called • In HTML, a color can be specified by using a color name:
Web development or web programming
- refers to the design of software applications for a Web site TABLE
Webmaster responsible for: -allow web developers to arrange data into rows and columns.
o The day-to-day maintenance of a Web site -consists of table cells inside rows and columns
o Monitoring web site traffic and ensuring that the web site’s hardware and -Each table cell is defined by a <td> and </td> tag -- td stand for table data
software are running properly -Each table row starts with <tr> and end with a </tr> tag
-if you want your cells to be headers, in those cases use the <th> tag instead
FRONT-END: HTML, CSS, JAVASCRIPT of the <td> tag

THREE LAYER OF WEB DESIGN: Structure, Style, Behavior LIST


-allow web developers to group a set of related items in lists.
HTML -An unordered list starts with the <ul> tag. List item starts with the
-Hyper Text Markup Language <li>tag
-HTML is not a programming language, it is a markup language -An ordered list starts with the <ol> tag. List item starts with the <li> tag.
-Document-layout and hyperlink specification language used to create web
-Web pages are commonly referred to as HTML pages or documents BLOCK ELEMENT
- has a default display value, depending on what type of element it is.
BASIC HTML DOCUMENT STRUCTURE -A block-level element always starts on a new line.
• The <HTML> Tag - the root of an HTML Document -A block-level element always takes up the full width available (stretches
• The <HEAD> Tag - information about the document, including metadata and scripts. out to the left and right as far as it can).
• The <BODY> Tag - the document’s actual code body. -A block level element has a top and a bottom margin, whereas an inline
element does not.
HTML ELEMETS -The <div> element is a block-level element. <div>Hello World</div>
•<!DOCTYPE html> -declaration defines this document to be HTML
• <html> - is the root element of an HTML page INLINE ELEMENT
•<title> - specifies a title for the document -does not start on a new line
•<body> - contains the visible page content -only takes up as much width as necessary.
•<h1> - defines a large heading -This is a <span> element inside a paragraph. <span>Hello World</span>
•<p> - defines a paragraph
DIV ELEMENT
HTML DOCUMENTS -is often used as a container for other HTML elements.
• All HTML documents must start with a document type declaration: <!DOCTYPE -has no required attributes, but style, class and id are common.
html> - can be used to style blocks of content when used together with CSS
• HTML document itself begins with <html> and ends with </html> tags
SYNTAX CLASS
HTML ELEMENTS -To create a class; write a period (.) character, followed by a class name.
HTML element Then, define the CSS properties within curly braces {}
-is defined by a start tag, some content, and an end tag
-is everything from the start tag to the end tag MULTIPLE CLASS
-elements can belong to more than one class.
HTML NESTED ELEMENTS -To define multiple classes, separate the class names with a space, e.g. <div
• HTML elements can be nested this means that elements can contain class="city main">.
other elements -The element will be styled according to all the classes specified.
• All HTML documents consist of nested HTML elements.
• The following example contains four HTML elements <html>, ID ATTRIBUTE
<body>, <h1>, and <p> -is used to specify a unique id for an HTML element.
-specifies a unique id for an HTML element.
HTML ATTRIBUTES -value of it must be unique within the HTML document.
Attributes
-provide additional information about elements DIFFERENCE BETWEEN CLASS AND ID
-are always specified in the start tag A class name can be used by multiple HTML elements, while an id name
-usually come in name/value pairs like: name="value" must only be used by one HTML element within the page

HREF ATTRIBUTES FORMS


• The <a> tag defines a hyperlink -is used to collect user input. The user input is most often sent to a server for
• The href attribute specifies the URL of the page processing.
Example:<a href="https://www.facebook.com">Facebook</a> -is used to create an HTML form for user input
-is a container for different types of input elements, such as: text fields,
SRC ATTRIBUTES checkboxes, radio buttons, submit buttons,
<img> tag -is used to embed an image in an HTML page
scr attribute -specifies the path to the image to be displayed INPUT ELEMENT
Example: <img src="img101.jpg"> -is the most used form element.
-can be displayed in many ways, depending on the type attribute.
WIDTH AND HEIGHTS ATTRIBUTES
• The <img> tag should contain the width and height attributes, which specifies the width TEXT FIELDS
and height of the image • The <input type="text"> defines a single-line input field for text input.
Example: <img src="img101.jpg” width="500" height="600" >

STYLE ATTRIBUTES
Style Attribute
-is used to add styles to an element, such as color, font, size, and more. LABEL ELEMENT
Example: <p style="color:red;">This is a red paragraph.</p> - defines a label for many form elements.
- is useful for screen-reader users, because the screen-reader will read out
LANG ATTRIBUTES loud the label when the user focuses on the input element.
-to declare the language of the Web page
-to assist search engines and browsers RADIO BUTTONS
-should always include the <html> tag • The <input type="radio"> defines a radio button.
• The following example specifies English as the language: <html lang="en"> • Radio buttons let a user select ONE of a limited number
• Country codes can also be added: <html lang="en-US"> of choices.

TITLE ATTRIBUTES CHECKBOXES


-defines some extra information about an element • The <input type="checkbox"> defines a checkbox.
-the value of it will be displayed as a tooltips when you mouse over the • Checkboxes let a user select ZERO or MORE options of a
element limited number of choices.
Example: <p title="I'm a tooltip">This is a paragraph.</p>
SUBMIT BUTTON
WEB BROWERS • The <input type="submit"> defines a button for
-to read HTML documents and display them correctly submitting the form data to a form-handler.
-Browser does not display the HTML tags, but uses them to determine how • The form-handler is typically a file on the server with a
to display the document script for processing input data.

COMMENTS HTML <form> ELEMENTS


-are not displayed in the browser - can contain one or more of the following form elements:
• <input> -One of the most used form elements and can be displayed in several ways, BACKGROUND BORDER
depending on the type attribute. -allow you to specify the style, width, and color of an element's border
-The border-style property specifies what kind of border to display.
HTML <datalist> ELEMENTS -Can have from one to four values: top border, right border, bottom border, left border
-specifies a list of pre-defined options for an <input> element.
-Users will see a drop-down list of the pre-defined options as they Dotted: Defines a dotted border
input data. Dashed: Defines a dashed border
-The list attribute of the <input> element, must refer to the id Solid: Defines a solid border
attribute of the <datalist> element. Double: Defines a double border
Groove: Defines a 3D grooved border. The effect depends on the border color value
INPUT TYPE RESET Double: Defines a double border Groove Defines a 3D grooved border. The effect
• <input type="reset"> defines a reset button that will reset all depends on the border-color value
form values to their default values: Inset: Defines a 3D inset border. The effect depends on the border-color value
Outset: Defines a 3D outset border. The effect depends on the border-color value
INPUT TYPE DATE None: Defines no border
• The <input type="date"> is used for input fields that should Hidden: Defines a hidden border elements,
contain a date. MARGINS
• You can also use the min and max attributes to add restrictions -used to create space around elements outside of any defined borders.
to dates: -For setting the margin for each side of an element (top, right, bottom, and left).
-CSS has properties for specifying the margin for each side of an element: margin-top,
INPUT TYPE TIME margin-right, margin-bottom, margin-left
• The <input type="time"> allows the user to select a time -All the margin properties can have the following values:
• Depending on browser support, a time picker can show up in the auto - the browser calculates the margin
input field. length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
INPUT TYPE FILE inherit - specifies that the margin should be inherited from the parent
• The <input type="file"> defines a file-select field and a "Browse" element.
button for file uploads.
PADDING
CSS Padding
-Cascading Style Sheets -used to create space around an element's content, inside of any defined
-is the language we use to style an HTML document. borders, setting the padding for each side of an element (top, right, bottom, and left).
-describes how HTML elements should be displayed.
-World Wide Web Consortium (W3C) BOX MODEL
-normally save in external .css files. Box model
-is used when talking about design
SELECTOR and layout.
-Are used to “find” the HTML -is essentially a box that wraps
elements you want to style around every HTML element.
-Simple selectors (select elements -it consists of content, padding,
based on name, id, class) borders, and margins.
-Combinator selectors (select
element based on a certain state)
ICON
HOW TO ADD CSS -To use the Google icons, add the following line inside the
There are three ways of inserting a style sheet: External CSS, Internal CSS, Inline CSS <head> section of your HTML page:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
External CSS family=Material+Icons">
-must include a reference to the external style sheet file inside the
<link> element, inside the head section. LISTS
-Can be written in any text editor, and must be saved with a .css -In HTML, there are two main types of lists:
extension.  unordered lists (<ul>)
-External .css file should not contain any HTML tags - the list items are marked with bullets
 ordered lists (<ol>)
Internal CSS - the list items are marked with
-This may be used if one single HTML page has a unique style numbers or letters
-inside the <style> element, inside the head section
TABLES BORDER
Inline CSS -To specify table borders in CSS, use the border property.
-May be used to apply a unique style for a single element -The example below specifies a solid border for <table>, <th>,
-To use it, add the style attribute to the relevant element and <td> elements:
-The style attribute can contain a CSS property
FORMS

BACKGROUND-COLOR
-Background-color property specifies the background color of an element

COLOR NAMES
-In CSS, a color can be specified by using a predefined color name
 CSS Border Color
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
-Use the padding property to add space inside the
COMMENTS text field.
-used to explain the code, and may help when you edit the source code at a later date. Tip: When you have many inputs after each other,
-are Ignored by browsers. you might also want to add some margin
-A CSS comment is placed inside the <style> element, and starts with /* and ends with */
Example: /* This is a single-line comment */

BACKGROUND-COLOR OPACITY
Opacity property
-specifies the opacity/transparency of an element
-It can take a value from 0.0-1.0.
-The lower value, the more transparent
div {
background-color: green;
STYLING A INPUT BUTTONS
opacity: 0.3;
}

BACKGROUND PROPERTIES
Background: Sets all the background properties in one declaration
Background-attachment: Sets whether a background image is fixed or scrolls with the
rest of the page
Background-clip: Specifies the painting area of the background
Background-color: Sets the background color of an element
Background-image: Sets the background image for an element
Background-origin: Specifies where the background image(s) is/are positioned NAVIGATION BAR
Background-position: Sets the starting position of a background image -contains a list of links to help visitors navigating through your website.
Background-repeat: Sets how a background image will be repeated
Background-size: Specifies the size of the background image(s)

You might also like