Responsive web design | css media query | html viewport

이것은 html 웹 페이지입니다 응답하는 이제 내가 어떻게 반응하는지 보여 줄거야

이렇게 더 작은 장치에서 완벽하게 작동합니다 화면 너비 변경시 atomaticalley 변경 요소의 스타일링 이제 스타일 시트에서 미디어 쿼리 코드를 삭제했습니다 이제 기본 스타일로 표시되는 웹 페이지 더 작은 장치에서는 읽을 수 없다 더 작고 더 큰 장치에서 읽을 수 있도록하기 위해 미디어 쿼리를 사용합니다 이제는 휴대 전화 및 안드로이드 기기와 같은 기기에서 읽을 수 있도록 해 드리겠습니다

이것은 태블릿의 화면 크기입니다 ibrowser inspector에서 view-port를 확인할 수도 있습니다 (ctrl + shift + I) 이것은 모바일 화면 너비입니다 이제 코드로 되돌아갑니다 이것은 스타일 시트이다

내가 사용한 수업에 대한 설명은 이전 비디오 링크를 확인하십시오 이제는 미디어 쿼리를 사용하여 더 작은 장치에서 웹 페이지를 읽을 수있게했습니다 미디어 쿼리는 @media 화면으로 시작합니다 최대 또는 최소 미디어 장치 너비 또는 높이 사용을 피하십시오; 값 다음에 표시하다 중괄호 사용 이 중괄호 안의 요소를 정의하기 시작합니다 우선 부모의 모든 너비 설정 집단 내지 100 %; 그런 다음 하위 요소의 스타일을 변경합니다 이제는 평소와 같이 요소를 정의하십시오

지금 이것은 읽을 수있다 사이드 바, 메인 컨텐츠 및 오른쪽 사이드 바 모두 100 % 너비로 설정됩니다 이제 링크, 로고 및 사이트 제목을 정의 할 수 있습니다 헤더 부분에 4 개의 div 엘리먼트가있다 그래서 그것을 읽기가 어렵게 만드는 것은 어렵다

링크 엘리먼트가 바닥에 고정된다

making website with html & css from Photoshop design pt1

이 그래픽을 웹 사이트로 만들 예정입니다 나는 웹 사이트가 될 부분을 이미 만들었습니다

이것들이 사업부가 될거야,이게 머리가 될거야 이것은 네비게이션이 될 것입니다, 이것이 배너가 될 것입니다 이것은 스페이서 하나, 기사, 섹션, 바닥 글, 스페이서 2가 될 것입니다 그래서 우리는 하나, 둘, 셋, 넷, 다섯, 여섯, 우리가 가질 일곱, 여덟 몫이야 우리가 갈 물건이 너무 많아서 저를 참아주십시오

각 div에 대해 작은 빨간색 사각형을 만들었습니다 HTML5에서는 헤더, 탐색, 배너를 수행합니다 이것들은 클래스가 아닙니다 헤더 HTML5는 새로운 일을하기 때문에 머리말이됩니다

그리고 그들은 머리말과 항법과 같은 낱말을 가지고 갔다 그것들을 HTML로 만들었 기 때문에 클래스에 CSS를 넣을 필요가 없습니다 하지만 우리는 클래스에서 CSS가 아닌 태그로 호출해야합니다 그래서 내가 바라는 첫 번째 사실은 오직 우리는 이것을 우리 고객을위한 이미지로 만들었고, 고객에게 보여주었습니다 웹 사이트가 어떻게 보이는지, 우리 웹 사이트를 만드는지도이기도합니다

그러나 우리는 웹 사이트의 그래픽에 많은 것을 사용하지 않을 것입니다 우리가자를 때 우리 웹 사이트에 사용할 유일한 조각이 될거야 로고, 페이스 북의 작은 로고, 배너 이미지 및 여기 두 가지가 녹색 원과 파란색 작은 버튼입니다 그리고 우리는 실제로 CSS에서도 그렇게 할 수 있습니다 그러나 우리는 그것들을 이미지로 만들어서 더 쉬울 것입니다

좋아,이 부서의 내부에서 우리는 하나, 둘, 셋, 네 개의 div를 할거야 나는 거기에 넣었어야했지만 우리가하는 것을 보게 될 것입니다 여기에 div를 두 개 넣을거야 그러면 여기에 div를 두 개 넣을거야 네비게이션에서는 두 개의 div를 여기에 넣을 것이고, 하나는 로고 용이고, 하나는 페이스 북과 텍스트를위한 것이고 여기는 모든 텍스트가 될 것입니다

당신이 텍스트로 보는 모든 것은 가정 서비스처럼 텍스트 일 ​​것입니다 탐색 파란색 배경은 파란색이 될 것입니다 이미지가 아닙니다 이 공간은 파란색이 될거야 이미지가 될 수 없어, 뒤에있는 초록색은 이미지가 아닌 색이 될 것이고, 뒤에있는 초록은 이미지가 아닌 색상이되고 바닥 글은 이미지가 아닌 색상이 될 것입니다 이제 우리가 그 일을 처리하게 되었으니, HTML 내부에 함께 넣어 보겠습니다

메모장에서 파일, 다른 이름으로 저장을 할 것입니다 우리의 데스크탑에 가서 Ohio Dental 폴더를 열어 보겠습니다 그리고이 indexhtml을 호출하고 저장을 클릭합니다 그리고 우리가 나의 오하이오 치과 폴더에 가서 당신이 그것을 열면, 여기에 몇 가지 자산이 있다는 것을 알게 될 것입니다

Indexhtml과 우리가 방금 포토샵에서보고 있던 indexpsd 로고가 있습니다 png 배너 이미지가 있습니다

우리는 의사의 이미지를 얻었고 그 다음에도 치과 스케치를 가지고있었습니다 그래서 제가하고 싶은 것은 제가 이것들을 조금 정리하고 싶습니다 새 폴더를 만들거야 이 사진을 하나의 이미지라고 부르면 모든 이미지를이 이미지에 넣을 것입니다 폴더가 웹 사이트와 연결될 것입니다

그럼 나는 새 폴더를 만들거야 이미지 사이트 또는 이미지 원본 이것들은 당신이 웹 사이트를 만드는데 사용했던 모든 이미지들입니다 스케치 일 수도 있고, 그냥 indexpsd 일 수 있습니다

그런 다음 CSS cuz라는 다른 폴더를 만들어야합니다 거기에 스타일 시트를 넣을거야 그래서 저는 이것을하고 파일> 다른 이름으로 저장을 해봅시다 Stylesheetcss를 CSS 폴더 안에 넣고 저장하십시오

그리고 지금 스타일 시트를 닫자 indexhtml을 작업 해 보자 페이지에서 CSS 폴더 안에 스타일 시트가있는 것을 보자 메모장으로 열어 보겠습니다

코드를 작성해 봅시다 html 쉘, html, 그리고 html을 닫는다 그리고 나서 우리는 타이틀 태그를 만들고 싶습니다 그 녀석들은 다 끝났어 제목, 오하이오 주 치과 의사 인데요

검색 엔진 최적화를 위해 오하이오주는 주 치과 의사입니다 누군가가 그 글을 쓰면 그걸 얻게 될거야 그럼 우리는 구매 꼬리표를 넣을거야 속물이 아니라 몸매 태그 그리고 나서 우리가 입을거야

우린 머리를 쓰는 걸 잊어 버렸어 너의 모든 것을 위해 머리를 넣어야 해 CSS 및 JavaScript 정보 좋아요, 우리는이 html을 준수 할 것입니다 그래서, 내가해야 할 일은 그 일을 시작하는 것입니다

그래서, 우리가 할 수있는 것은 느낌표입니다 DOCTYPE이라는 ​​단어를 대문자 그럼 우리는 제목 뒤에, 우리는 메타 태그를 할 필요가 있습니다 메타 문자 세트 = "UTF-8"및 그것은 대문자 UTF-8이어야합니다 일반적으로 HTML은 모두 소문자로 표기 할 수 있습니다

나는 물건을 철자하는 것이 더 쉽다 그리고 나서 우리는에 대한 링크를 넣을거야 CSS는 스타일 시트이며, 당신이 모든 것을 정확히 철자하는지 확인하십시오 그렇지 않으면 작동하지 않을 것입니다 이미 알고 있습니다

그리고 나서 우리는 stylesheetcss를 넣을 것입니다 내가 사물을 쓰고 있는지 확인 하겠어 나는 그들이 모두 철자가 맞는지 확인하는 것만은 아닙니다 다시 한번 살펴 보겠습니다

제목 메타 문자 세트 UTF-8 링크 상대 스타일 시트 href = stylesheetcss 안녕하세요? CSS 스타일 시트, 그래서 우리는 당신의 이름을 저장, 복사, 바로 여기에 붙여 넣으세요 그것은 내가하는 공통점입니다 이제는 CSS 폴더 안에 있으므로 CSS / 여기에서 오는거야

폴더에 넣고 스타일 시트에 넣습니다 좋아요, 저장하겠습니다 S를 저장하면 저장됩니다 다음은 PSD로 돌아가 보겠습니다 우리는 하나, 둘, 셋, 넷, 다섯, 여섯, 7, 8 divs, 헤더, nav

그럼 해보 죠 우리는 머리글을 먼저 가지고 있습니다 그런 다음 헤더를 닫습니다 그런 다음 탐색을 수행합니다 탐색을 닫습니다

그래서 이것을 복사, 붙여 넣기, 붙여 넣기, 붙여 넣기, 붙이기 등의 작업을 할 수 있습니다 nav가 배너 인 후에 그리고 nav가 말한 곳에 배너를 씁니다 그 다음 배너 뒤에, 보자 우리는 하나, 기사를위한 공간이 없다

죄송합니다, 나는 간다 spacer1, 우리는 기사를 가지고있다 그 단어를 철자하기가 어렵습니다 그런 다음 섹션, 바닥 글, 스페이서가있는 기사까지 섹션, 바닥 글, 그리고 나서 스페이서를 걸고 여기에 놓으십시오 그리고 저는 1을 2로 칠 것입니다

<spacer1> </ spacer1>, <spacer2> </ spacer2>에 1이 있어야합니다 좋습니다, 그래서 우리는 준비가되어 있습니다 이제 거래가 있습니다이 작업을 할 때 배경이 있습니다 여기에 흰색이 있고 여기에 파란색이 있고 여기에 흰색이 있습니다

그러면 밝은 녹색, 파란색, 녹색이 바닥에 있습니다 그럼 우리는 배경 색상으로 사용하기 위해이 스트립을 사용합니까? 그것에 대해 생각해보십시오 이 텍스트와 여기의 텍스트가 여기에 녹색을 밀었 을까요? 그게 맞지 않는 거지 그래서 평상시에하는 일은 데스크톱 용입니다 나는 지금 모바일에 대해서 생각조차하지 않는다

나는 모든 길을 가로 지르는 div를 가지고 있으며, 모든 길 건너편에 있습니다 그래서 우리는 2, 3 중 하나를 할 수 있습니다 이 모든 종류의 방법이 있습니다 내 머리말, 그냥 거기서 시작합시다 우리는 흰색 머리말을하고 싶습니다

우리는 충분히 높이 올리고 싶습니다 우리는 divs를 내부에 가지고 싶기 때문에 그것을 가져 오도록하겠습니다 먼저 머리글을 작업 해 보겠습니다 먼저 헤더를 CSS를 열어 보겠습니다 메모장으로 열어 봅시다

그래서 지금 나는 둘 다 열려 있습니다 좋아요, 머리글 앞에는 점이 필요 없어요 사촌 일 필요는 없습니다 우리는 이것을 980 픽셀 너비로 만들고 싶습니다 맞습니까? 내가 여기에 있다면, 내가 980 픽셀 너비로 만들었다 고 생각해

그렇지? 무슨 일이 일어 났는지 보자 제 시간에 돌아 가자 이미지 크기는 980입니다 좋아, 메모장, 스타일 시트, 우리는 {width : 980px;}, 우리는 이것을 자체 회선에 넣을 것입니다 그것을 자신의 라인에 넣으십시오

그럼 우리는 글을 쓸거야, 우리는 키즈를 넣을 필요가 없다 우리가 할 로고가 충분히 높을거야 그래서 우리는 중심에두고 싶습니다 그래서 나는 항상 잊어 버렸다 너무 많은 CSS 센터 div 않습니다

W3C 학교 예, 어떻게해야합니까? 저것 봐, 여백있어 그것은 마진입니다 나는 항상 잊는다, 나의 두뇌는 매우 잊기 쉽다 그럼 마진을 두자

위아래에 0 픽셀을 원합니다 그리고 우리는 왼쪽과 오른쪽에 자동을 원합니다, 자동은 오른쪽에 센터를 의미합니다 자, Ctrl + S를 저장해 봅시다 배경색을 만들어 보겠습니다 그래서 우리는 우리가 작업하고있는 것을 알고 있습니다

배경색, 그리고 빨간색으로 가자 지금 우리가 볼 수있게, 알았어 저장하십시오 이제 Chrome에서 Google 색인 페이지를 열어 보겠습니다 Google 크롬으로 열기

아직 거기 엔 아무것도 보이지 않을거야 거기에 이미지를 넣자 [COUGH] HTML로 돌아가 보겠습니다 헤더 안쪽에서 하나는 로고 또는 div 클래스라고합니다 나는 비행 녀석에 이것을 전부하고있다

우린 실수를 저지를거야 좋은거야 내가 어떻게 그들을 극복하고 가까운 문제를 해결하는지 보게 될테니까 이 div 안에는 img src =를 넣을 예정입니다 내 이미지 폴더 /logo

png로 이동하십시오 좋아요, 거기에 있어야합니다 우리 페이지를 다시 열고 새로 고침 해보자 봐, 그래, 지금은 다르다 좋아, 그 이미지를 그곳에 넣어야 했어

그래 이것은 로고입니다 그래서 저는 그것뿐 아니라 로고를 넣고 싶습니다 우리는 Photoshop에 나가서 수확 도구를 얻고 내가자를거야 오하이오 가정

좋습니다 맞아, 어디 보자 니스, Enter 키를 누르십시오 직접 할 수 있습니다 실제로 저는 이것을 자산에 넣을 것입니다

파일> 내보내기> 저장 웹, 죄송합니다, 무슨 일 이니? 파일> 내보내기> 웹용으로 저장을 선택합니다 이전 버전의 Photoshop을 사용하는 사용자는 File, Save for 웹, 내보내기가 아니며 이번에는 JPEG로 저장합니다 내가 볼 때 PNG로 해 그런 다음 오하이오 치과 이미지 폴더로 이동합니다 여기 안에 로고를 쓰려고합니다

이제 logopng가 있고 logojpg가 있습니다 내 logojpg, 사용하고 싶은 로고입니다

다시 여기로 가서 jpg를 집어 넣자 그걸 저장하고, 우리에게로 돌아 가자 이제 여기에 약간의 줄이 있습니다 그게 뭔지 궁금해? 그래서 내가하고 싶은 것은, 박쥐에서 벗어나기를 원한다는 것입니다 <a href = and 다음 index

html, 그래서이 로고는 모든 페이지에있을 것입니다 그것은 바로 홈페이지로 다시 연결됩니다 저장하고 Chrome으로 이동하여 새로 고침하고 내가 그 위에 마우스를 올리면, 이렇게 보입니다 나는 그것을 클릭 할 수 있습니다 그것은 인덱스 페이지로 돌아갑니다 좋습니다

자 이제 CSS를 더 해보겠습니다 나는 약간의 물건으로 놀고 싶다 나의 CSS는 어디에서? 알았어 머리글 앞에 내가 다시 가자

CSS와 여기에 왼쪽에 여백 CCS 여백이 있습니다 내가하려는 일은 내가하고있는 일에 대해 너에게 말하고 싶지 않아 제가하고있는 일은 div 위에있는 하얀색 부분을 보게 될까요? 나는 그 마진을 없애고 싶다 그래서 몇 가지 다른 방법이 있습니다 나는 시체를 쓸 수 있었다

이 부분을 바로 여기 복사해서 거기에 넣으십시오 그리고 여백 0 %를 쓴 다음, 배경색, 파란색으로하자 이제 우리는 무슨 일이 일어나고 있는지 알 수 있습니다 저장하고 새로 고치십시오, 거기 우리는 간다 당신은 그것이 위로 올라가고 푸른 색이 배경에 있다는 것을 보았습니까?

Shop Web Design – Adobe XD to HTML CSS Tutorial (Part 1/2)

안녕 모두들 인도네시아에서 Angga Risky에 오신 것을 환영합니다 어떻게 지내십니까? 이번에는 디자인을 공부하고 HTML 및 CSS에 디자인을 적용하는 법을 배웁니다 그래서 우리는 Adobe XD Software를 사용하여 처음 디자인 할 것입니다 그 다음엔 부트 스트랩으로 HTML과 CSS로 디자인을 만들 것입니다 좋아요

시작하기 전에 오늘의 질문이 있습니다) 어제 저는 채널 커뮤니티에서 많은 질문을 받았습니다 그리고 하나씩 대답하고 싶습니다 그래서 지금 질문은 그래픽 디자이너가 된 기분이 어떻습니까? 그래, 그게 내가 가진 질문이야 자이 디, 그 전에 2005 년에는 그래픽 디자이너로 일했습니다 그리고 저는 마케팅에 대해 많은 것을 배웠습니다 그리고 인터페이스와 비주얼 디자인에 대해서도 마찬가지입니다 그래서 나는 내 자신의 디자인 기술을 향상시킬 수있는 것들로부터 또한 관계 및 네트워크 기술 향상 (관계 속) 또한 마케팅에서의 카피 라이팅 기술에 대한 전문성을 높입니다 그것은 어때? 나는 행복하고 매우 혼란 스럽다 때로는 관리자가 둘 이상 있기 때문에 때때로 디자인 A를하면 갑자기 매니저가 A 디자인을 변경하라고합니다 하지만, 다른 관리자 그는 그가 A 디자인을 좋아한다고 말한다 What and so ?? 어떻게하면이 프로젝트를 끝낼 수 있으며, 심지어 이것이 항상 불완전해진다 거기에 많은 관리자가 있다는 것을 알고 있습니다 하지만, 지금 내 제안은

최고 직책을 가진 관리자의 지시를 따르십시오 때로는 제품 또는 회사의 소유자이기 때문에 최고 관리자의 목소리를 따를 것입니다 가장 낮은 관리자가 아닙니다 예를 들어 관리자가 3 명이므로 가장 높은 방향을 따를 수 있습니다 그래서, 그는 너를 도울거야

회사 소유자에게 디자인을 확인하려면 결론은, 최고 관리자의 방향을 따르고 디자인은 제품 소유자가 확인합니다 좋아요

이번에는 비디오에 대해 계속하겠습니다 오늘은 Adobe XD 및 HTML CSS를 사용하여 디자인 할 것입니다 하지만 매우 길기를 원하지 않기 때문에 2 개의 비디오로 만들 것입니다 그래,이 비디오에서 우리는 첫 번째 비디오를 만들 것입니다 디자인을 HTML 및 CSS (Bootstrap)로 구현하려면 알았어, 그냥 가자

좋아, 내 데스크톱에 오신 것을 환영하며 디자인을 위해 1 개의 그림을 준비했습니다 전자 상거래 웹 사이트에서 가져온 것입니다 먼저 사진이나 제품 사진을 준비 할 수 있습니다 그래서 이것은 Adobe XD입니다 그래서 우리는 중간 크기의 아트 보드를 만들 것입니다

그런 다음 문서를 먼저 저장합니다 그 후 우리는 Adobe XD에서 그리드 시스템을 사용합니다 또한 사용하는 CSS 프레임 워크를 기반으로 사용자 정의 할 수 있습니다

그래서 Bootstrap 프레임 워크를 사용하여 더 쉽고 빠르게 만들 것입니다 메뉴의 왼쪽과 오른쪽에 로고가 있어야합니다 나중에 우리 제품에서 얻을 수있는 주요 색상은 나중에 더 적합합니다

Shop Web Design – Adobe XD HTML CSS Tutorial Part (2/2)

안녕 모두 다시 돌아 왔고 이전 비디오의 비디오 연결입니다 이 비디오에서 우리는이 디자인을 계속할 것입니다

HTML 템플릿에 부트 스트랩 프레임 워크 사용 그리고 현재로서는 웹 사이트에서 사용할 자산의 일부부터 시작해야합니다 이번에는 Part 1에서 비디오까지 시청 해 주셔서 감사합니다 이제이 비디오에 대해 조언을 해주시기 바랍니다

그래서이 비디오가 당신에게 좋은 것이라고 생각한다면 나에게 말해줘 그리고 그것이 충분하지 않다면, 당신은 또한 나에게 그것을 향상시키는 방법을 말할 수있다 Ok, 인도네시아 인사, 나는 Angga 위험하다, 다시 너희들을 만난다 🙂

Basic HTML for Web Design : Web Design Alt Text

나는 이미지를위한 대체 텍스트에 대해 이야기하기 위해 약간의 시간을 갖고 싶다 그리고 이것들은 정말로 중요하다

많은 브라우저가 사람들이 설정할 수없는 이미지 나 설정을 표시하지 않기 때문에 이미지를 표시하고 이미지에 텍스트가 있으면 그들에게 우리가 바로 여기에이 로고 살펴 보겠습니다 것을 놓칠 수 있기를 원하고 나는이 없습니다 죄송합니다 샘플 로고입니다 이미지 파일과 비슷하지 않습니다 당신이 알고있는보고있는 장애인은 그곳에 이미지가 있다는 것을 볼 수 없었습니다 샘플 로고는 대체 텍스트 또는 대체 텍스트를 추가하려고합니다

그래서 우리는 간다 여기서 이미지가 바로 여기에 jpeg와 같은 샘플을 가진 이미지 소스가 있습니다 그리고 우리 대체 텍스트를 추가하고 싶습니다 그래서 우리는 단어 alt를 문자 alt equals에 입력 한 다음 인용문을 입력합니다 마크를 추가하고 샘플 로고를 추가하고 싶습니다

그래서 그들은 그 이미지가 실제로 샘플이라는 것을 압니다 심벌 마크 그리고 그들이 독서와 같은 것을 가지고 있다면, 당신은 그것을 알고 있습니다 로고와 함께 시작한다고 말할 수있는 페이지가 있습니다 샘플 로고를 입력 한 다음 텍스트로 이동하십시오

그리고 당신은 텍스트가 거기에 있음을 볼 수는 없지만 if 우리는 빈 공간 대신 ​​이미지를 숨기려고했습니다 html 텍스트 샘플 로고

Basic HTML for Web Design : Right & Center Align Horizontal Rules in HTML

이제 수평 규칙을 왼쪽에 정렬하는 방법을 보여 줬습니다 그러나 그것은 정말로 귀하의 웹 페이지의 오른쪽에도 쉽게 할 수 있습니다

유일한 차이점은 해야 할 일은 수평 규칙에서 왼쪽으로 정렬하도록 설정 한 것입니다 왼쪽에서 오른쪽으로 맞 춥니 다 저장하면이 페이지가 새로 고침됩니다 그리고, 이제 보여줍니다 페이지의 오른쪽에있는 여기에 있습니다

이제 기본값으로 되돌리려면 align 속성을 모두 가져 오거나 센터로 정의 할 수 있으므로 알 수 있습니다 중앙 정렬됩니다 그래서 나는 그것을 구할 것이다 나는 그것을 다시 볼 것이고 그것은해야한다 중심에 서십시오

HTML Head element | MTA Web Design Fundamentals | Cardiff Met

head 요소는 웹 페이지에 대한 메타 데이터를 포함합니다 페이지는 표시되지만 웹 페이지 자체에는 표시되지 않습니다

head 요소 내에 title 태그를 추가하는 방법을 이미 살펴 보았습니다 브라우저 제목 표시 줄 또는 탭에 나타나는 제목 다른 두 가지 중요한 head 요소에 포함 된 요소는 링크 및 스크립트입니다 링크가 지정하는 데 사용됩니다 페이지에 사용되어야하는 스타일 시트에 대한 링크 후반부 이 과정은 스타일 시트와 스타일 시트 언어 CSS를 탐구합니다

계단식 스타일 시트 – 자세히 지금은 스타일 시트에 대한 링크를 추가하겠습니다 몇 가지 기본 서식을 제공합니다 link 태그는 두 개의 속성을 필요로합니다 rel은 관계, 여기 그것은 우리가 연결하고있는 스타일 시트이므로, 우리는 "stylesheet"의 속성에 속성을 지정하십시오

다른 필수 속성은 URL입니다 스타일 시트 자체에 우리는 이것을 "href"속성으로 지정합니다 이제이 페이지를 저장하면 스타일 시트를 추가하는 효과를 볼 수 있습니다 여기에 이전이 있고, 여기에 뒤에 있습니다

그래서 우리는 몇 가지 간단한 형식을 배경 스타일을 변경하고 글꼴을 변경했습니다 하지만 우리는 분명히 그것의 외관을 개량하기 위하여 일하는 제비 뽑기 일 링크 요소를 앵커 요소 또는 "a"요소와 혼동해서는 안됩니다 "a"는 하이퍼 링크를 만드는 데 사용되고, link는 스타일 시트에 링크하는 데 사용됩니다 에 대한 예를 들어 "Wales"라는 단어를 Wikipedia for Wales I에 연결하려면 앵커 태그 인 "a"태그를 사용합니다

스크립트는 페이지에 자바 스크립트를 추가하는 데 가장 일반적으로 사용됩니다 자바 스크립트는 웹 페이지를 대화 형으로 만드는 기술 우리는 다루지 않습니다 javascript는이 과정에 있지만 예제로 간단한 스크립트를 추가해 보겠습니다 페이지

스크립트 태그를 열고 간단히 말하면 경고를 표시합니다 "hello world" 그 파일을 저장하면 "hello world"라는 팝업 메시지가 나타납니다 스크립트는 JavaScript 파일을 별도로 연결하는 데 더 일반적으로 사용됩니다 예를 들어 Fotorama라는 스크립트를 사용하여 사진 갤러리를 생성하기도합니다

그래서 나는이 HTML 태그에 스크립트 태그를 포함시킬 것이다 스크립트를 입력 한 다음 SRC를 지정하여 파일의 소스 스크립트는 닫을 때 태그가 필요합니다 JavaScript 파일에 대한 링크를 지정합니다 일부 오래된 브라우저는 지원하지 않을 수 있습니다

JavaScript 또는 사용자가 JavaScript를 비활성화했을 수 있습니다 noscript 태그를 사용할 수 있습니다 스크립트를 사용하지 않는 사용자에게 콘텐츠를 제공합니다 그래서 나는 단지 "당신의 브라우저가 스크립트를 사용할 수 없도록 설정하면 스크립트가이 사진들을 갤러리로 볼 수 있습니다 "그래서 내 브라우저에서 스크립트를 비활성화하십시오

자주하지 않으려 고합니다 텍스트는 noscript 요소에 나타납니다

Basic HTML for Web Design : Setting Fonts in HTML

이제 전체 웹 페이지의 글꼴을 정의하는 것이 매우 쉬울 것입니다 이미 가지고있는 "GO (진행)"버튼에서 내 로고와 일치하는 좋은 산 셰리프를 선택하십시오

과 그래서 나는 나의 페이지의 맨 꼭대기에 여기 올라갈 것이고, 나는 나의 머리글과 나의 이미지를 가지고있다 여기, 나는 첫번째 이미지 다음에, 정말로 첫 번째 텍스트에 이르기를 원한다 이리 그리고 여기에서 필자는 글꼴 서체를 정의 할 것입니다 그래서 나는 여기에 들어가서 할거야

font face = "helvitica, arial", 그리고 나는 페이지의 맨 아래로 갈 것입니다 그 태그를 닫으려고 우리는 / 폰트를 작성하고 저장합니다 그러면 여기를 새로 고칩니다 이미 완료되었습니다

이 모든 본문은 이제 산 세리프가되어 약간 일치합니다 좋아, 그래서 좋아 보인다

Basic HTML for Web Design : Web Design Background Image Creation

이제 웹 사이트에 배경 이미지를 넣기 위해 노력할 것입니다 그러나 우리가 그렇게하기 전에, PhotoShop에서 실제로 배경 이미지를 만들겠습니다

이 기회를 활용하겠습니다 파일 크기와 RGB 스펙트럼 및 기타 필요한 것들에 관해서 이미지를 웹에 업로드하는 동안 명심하십시오 그래서 우리는 시작할 것입니다 나는 새 문서를 만들거야 그것을 백 픽셀로 100 개 만들자

그래서 그건 너비와 높이 그리고 여기서 우리는 결의안을 볼 것입니다 그리고 몇 가지가 있습니다 이미지의 해상도를 확인할 수있는 여러 가지 방법 그러나 웹 사이트의 표준은 1 인치당 72 픽셀 또는 PPI가 있습니다

실제로, 실제로는 매우 작습니다 다른 이미지 파일로 그러나 인터넷에서 볼 수 있기 때문에 실제로는 볼 수 없습니다 텔 그것은 단지 컴퓨터 화면에 있습니다

너도 알다시피, 이걸 인쇄하면된다 모든 것이 고르지 않게 보일 때 픽셀을 볼 수 있습니다 그리고 나서 컬러 모드에서 인쇄용 CNYK와는 대조적으로 RGB가되도록 할 것입니다 과 그레이 스케일이되기를 원한다면 그레이 스케일이 될 수도 있지만, 우리는 단지 할 것입니다 지금 당장 RGB

나는이 파일을 만들고 내 배경 이미지를 말할 것입니다 나는 희미한 노란색 폴카 도트를 원한다고 말할 것입니다 그래서, 그냥 던지기 만 할거야 이게 당신을 위해 정말 빠릅니다 그리고 거기에 노란색 폴카 도트가 있습니다

그거야 내 배경 이미지로

Basic HTML for Web Design : Change Single Text Color in HTML

그래서 우리는 우리의 기본적인 텍스트 색상을 꽤 많이 가지고 있고 우리의 활성 색상과 방문한 링크 및 기타 링크 이제 한 단어 만 바꾸고 싶다고 가정 해 봅시다 단락의 텍스트 색상 그리고 그렇게하기 위해 우리는 들어갈 것입니다 – 그래서 우리는 온 몸을가집니다

텍스트를 검정색으로 설정하면 문서의 모든 텍스트가 표시되지만 그렇지 않습니다 의미심장 한 것이 아닙니다 여기 두 번째 단락에서 두 번째 줄을 말하자 우리는 그 문장을위한 글꼴의 색깔을 바꾸고 싶다 그래서 우리는 여기에 들어가서 윗줄, 꺽쇠 괄호, 글꼴, 공백, 색, 인용 부호 및 글꼴 색상을 입력하십시오

우리는 원한다 ff0033을 한 다음 다른 인용 부호와 꺽쇠 괄호를 사용하겠습니다 그리고 나서 우리가되고 싶은 문장 (붉은 색), 그래서 빨간색 문장 뒤에, 우리는 다른 꺽쇠 괄호를 사용하고, / font로 그 태그를 닫을 것입니다 우리는 간다 그리고 우리는 그것을 살릴 것이고, 우리는 텍스트로 가서 미리 볼 것입니다

그리고 여기 두 번째 단락에서 두 번째 줄에 해당 텍스트가 빨간색으로 변경되었습니다 그리고 너 한 글자, 한 단어 또는 한 번에 단락으로이 작업을 수행 할 수 있습니다 당신이 컨테이너 사이에 가지고있는 것