Scribd Logo
Hochladen

Willkommen bei Scribd!

  • HTML Css Tutor

    Hochgeladen von

    ilias ahmed
    40 Ansichten25 Seiten
    The document provides information about HTML & CSS Lesson 1. It discusses the LAMP stack components including Linux, Apache, MySQL, and PHP/Perl. It also describes the 3-tier architecture with presentation, process, and data tiers. Finally, it begins explaining basic HTML tags and structure.

    Originalbeschreibung:

    html css tutor html css

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    The document provides information about HTML & CSS Lesson 1. It discusses the LAMP stack components including Linux, Apache, MySQL, and PHP/Perl. It also describes the 3-tier architecture with presentation, process, and data tiers. Finally, it begins explaining basic HTML tags and structure.

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    40 Ansichten25 Seiten

    HTML Css Tutor

    Hochgeladen von

    ilias ahmed
    The document provides information about HTML & CSS Lesson 1. It discusses the LAMP stack components including Linux, Apache, MySQL, and PHP/Perl. It also describes the 3-tier architecture with presentation, process, and data tiers. Finally, it begins explaining basic HTML tags and structure.

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 25

    HTML & CSS -Lesson 1

    IT Lecturerer: ilias ahmed,md


    alauddin,shoshag shiekh

    1 TECHALVEE.com
    2 LAMP WAMP XAMPp

    – 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. It’s 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
    TECHALVEE.com

    with Apache and is well understood by the vast majority of Systems


    3 3-tier architecture
    framework

    Presentation Process
    tier tier

    Transport
    Client tier

    Middle tier Data tier

    Application Data source


    server
    TECHALVEE.com
    4 3-tier architecture
    framework
    – Presentation tier : This tier displays user’s 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.
    TECHALVEE.com
    5 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
    TECHALVEE.com
    – The text between <p> and </p> is displayed as a paragraph
    6 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
    TECHALVEE.com
    – The text between <p> and </p> is displayed as a paragraph
    7 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

    TECHALVEE.com
    8 HTML 1

    HTML Page Structure


    Below is a visualization of an HTML page structure:

    TECHALVEE.com
    9 HTML 1

    TECHALVEE.com
    10 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


    TECHALVEE.com
    – Start your web browser and open your html file from the File, Open menu, or just
    11 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>

    TECHALVEE.com
    12 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>

    TECHALVEE.com
    13 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>

    TECHALVEE.com
    14 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>

    TECHALVEE.com
    15 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>

    TECHALVEE.com
    16 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>

    TECHALVEE.com
    17 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

    TECHALVEE.com
    18 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>

    TECHALVEE.com
    19 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 http-equiv
    attribute is defined. if none of these are defined, the content attribute
    TECHALVEE.com
    20 HTML Editor - <meta>
    Attributes

    TECHALVEE.com
    21 HTML Editor - <meta>

    <head>
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Ståle 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>Đà Nẵng</h1>
    </body>
    </html>

    TECHALVEE.com
    22 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
    <!DOCTYPE html>
    starts with <html>
    the <li> tag.
    <body>
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>
    </body>TECHALVEE.com
    </html>
    23 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>

    TECHALVEE.com
    24 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

    TECHALVEE.com
    Hello every one, this is techalvee solution
    every student will be 10 project in each
    module

    TECHALVEE.com

    Das könnte Ihnen auch gefallen