Scribd Logo
Upload

Welcome to Scribd!

  • 113 views

    HTML&CSS Lesson 1

    Uploaded by

    Phan Văn Tú
    Here are the codes to answer the questions: Question 1: <!DOCTYPE html> <html> <body> <h2>My First Heading</h2> <p>This is my first paragraph.</p> </body> </html> Question 2: <!DOCTYPE html> <html> <body> <h2>About Me</h2> <p>Name: Your Full Name</p> <p>Address: Your Address</p> <p>Birthday: Your Birthday</p> <p>Age: Your Age</p> <p>Job: Your Job

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    HTML&CSS Lesson 1

    Uploaded by

    Phan Văn Tú
    113 views25 pages
    Here are the codes to answer the questions: Question 1: <!DOCTYPE html> <html> <body> <h2>My First Heading</h2> <p>This is my first paragraph.</p> </body> </html> Question 2: <!DOCTYPE html> <html> <body> <h2>About Me</h2> <p>Name: Your Full Name</p> <p>Address: Your Address</p> <p>Birthday: Your Birthday</p> <p>Age: Your Age</p> <p>Job: Your Job

    Original Description:

    nn

    Original Title

    HTML&amp;CSS Lesson 1.pptx

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Here are the codes to answer the questions: Question 1: <!DOCTYPE html> <html> <body> <h2>My First Heading</h2> <p>This is my first paragraph.</p> </body> </html> Question 2: <!DOCTYPE html> <html> <body> <h2>About Me</h2> <p>Name: Your Full Name</p> <p>Address: Your Address</p> <p>Birthday: Your Birthday</p> <p>Age: Your Age</p> <p>Job: Your Job

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    113 views25 pages

    HTML&CSS Lesson 1

    Uploaded by

    Phan Văn Tú
    Here are the codes to answer the questions: Question 1: <!DOCTYPE html> <html> <body> <h2>My First Heading</h2> <p>This is my first paragraph.</p> </body> </html> Question 2: <!DOCTYPE html> <html> <body> <h2>About Me</h2> <p>Name: Your Full Name</p> <p>Address: Your Address</p> <p>Birthday: Your Birthday</p> <p>Age: Your Age</p> <p>Job: Your Job

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 25

    HTML & CSS -LESSON 1

    IT Lecturerer: Ngo Dinh Cuong

    LAMP

    Linux: the base operating system for a LAMP system is typically the Linux operating system. Sun Microsystems saw the advantage of the LAMP architecture and open sourced Solaris in an effort to increase their footprint in the web services market. Apache: is the traditional web server. It has a longer history, better support, and more systems administrators comfortable with its configuration and maintenance. It also can support J2EE applications as easily as a PHP or Python application. MySQL: is the most popular of the open source relational databases. Its fast, easy to maintain, and has a large user base. It supports clustering, replication, and has a variety of backup solutions. Python/Perl/PHP: is an embedded templating / programming language similar to ASP. PHP is a very capable web application language. It integrates very well with Apache and is well understood by the vast majority of Systems Administrators.

    LAMP

    3-tier architecture framework

    Presentation tier

    Process tier

    Client

    Transport tier Middle tier Data tier

    Application server

    Data source

    3-tier architecture framework

    Presentation tier : This tier displays users interface. It gets data from Middle tier and show on screen.

    Middle tier : This tier is divided into 2 small tiers Process tier : To get original data from Transport tier. The original data will be filtered to remove unnecessary data, and then data will be sent to Presentation tier. Transport tier : This tier communicates with Data tier. It sends demands to Data tier and receives responses from Data tier. If the response is data, the data will be sent to Process tier.
    Data tier : It is database. This tier get demands from Transport tier and then access database and sending response back to Transport tier.

    HTML 1
    <!DOCTYPE html> <html> <body> <h1>PHP Online</h1> <p>Good luck</p> </body> </html>

    The DOCTYPE declaration defines the document type The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph

    HTML 1
    <!DOCTYPE html> <html> <body> <h1>PHP Online</h1> <p>Good luck</p> </body> </html>

    The DOCTYPE declaration defines the document type The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph

    HTML 1
    What is HTML?

    HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describes document content HTML documents contain HTML tags and plain text HTML documents are also called web pages

    HTML 1
    HTML Page Structure
    Below is a visualization of an HTML page structure:

    HTML 1

    HTML Editor

    Edit Your HTML with Notepad

    Save Your HTML


    Select Save as.. in Notepad's file menu.

    When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

    Run the HTML in Your Browser

    Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.

    HTML Editor

    HTML Headings: HTML headings are defined with the <h1> to <h6> tags.
    <!DOCTYPE html> <html> <body> <h1>PHP Online</h1> <h2>Hello PHP World!</h2> <h3>HTML Heading</h6> </body> </html>

    HTML Editor

    HTML Paragraphs: HTML paragraphs are defined with the <p> tag.
    <!DOCTYPE html> <html> <body>
    <p>This is a paragraph.</p> <p>This is another paragraph.</p>

    </body> </html>

    HTML Editor
    <!DOCTYPE html> <html> <body> <p align="left"> Baby, life was good to me<br> But you just made it better<br> I love the way you stand by me<br> Through any kind of weather<br> </p> </body> </html>

    HTML Editor
    <!DOCTYPE html> <html> <body> <p align="center"> I don't wanna run away, just wanna make your day<br> When you feel the world is on your shoulders<br> I don't wanna make it worse, just wanna make us work<br> Baby, tell me I will do whatever<br> </p> </body> </html>

    HTML Editor
    <!DOCTYPE html> <html> <body> <p align="right"> It feels like nobody ever knew me until you knew me<br> Feels like nobody ever loved me until you loved me<br> Feels like nobody ever touched me until you touched me<br> Baby, nobody, nobody until you <br> </p> </body> </html>

    HTML Editor

    <address>: defines the contact information for the author/owner of a document or an article.
    <!DOCTYPE html> <html> <body> <address> Lecturer<br> Ngo Dinh Cuong<br> 15A Quang Trung, Danang, Vietnam<br> 0511 3 709 666<br> </address> </body> </html>

    HTML Tag - <br>


    Definition and Usage

    The <br> tag inserts a single line break. The <br> tag is an empty tag which means that it has no end tag.

    Tips and Notes


    Tip: The <br> tag is useful for writing addresses or poems. Note: Use the <br> tag to enter line breaks, not to separate paragraphs.
    DNICT <br> Da Nang Information and Communication Technology

    HTML Editor

    HTML Links: HTML links are defined with the <a> tag.
    <!DOCTYPE html> <html> <body> <a href=http://www.dnict.vn/daotao>DNICT Dao tao</a></body> </html>

    HTML Images: HTML images are defined with the <img> tag.
    <!DOCTYPE html> <html> <body> <img src=dnict.jpg" width="104" height="142"> </body> </html>

    HTML Tage - <meta>


    Metadata is data (information) about data.

    The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

    Tips and Notes

    Note: <meta> tags always goes inside the <head> element.


    Note: Metadata is always passed as name/value pairs. Note: The content attribute MUST be defined if the name or the httpequiv attribute is defined. if none of these are defined, the content attribute CANNOT be defined.

    HTML Editor - <meta>


    Attributes

    HTML Editor - <meta>


    <head> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Stle Refsnes"> <meta charset="UTF-8"> </head>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <h1> Nng</h1> </body> </html>

    HTML Editor

    HTML Unordered Lists: An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
    <!DOCTYPE html> <html> <body> <ul> <li>Coffee</li> <li>Milk</li> </ul> </html>

    HTML Ordered Lists: An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
    <!DOCTYPE html> <html> <body> <ol> <li>Coffee</li> <li>Milk</li> </ol> </body> </html>

    HTML Editor

    HTML Definition Lists:


    A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list.

    The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):
    <!DOCTYPE html> <html> <body> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </html>

    Try It Yourselft
    Question 1: To write a simple web with using heading 2 and <p> paragraph tag Question 2: To make a simple web that introduces your information including fullname, address, birthday, age, job and hobbies

    You might also like